问题描述
我在角度布线方面遇到问题。
当我尝试转到my.domain/new-york时，页面正确（HomeComponent）
但是，当我尝试转到my.domain/new-york/search时，我得到了HomeComponent而不是SearchComponent。我做错了什么？
const routes: Routes = [
{
path: '',component: BasicComponent,children: [
{
path: '',component: HomeComponent,data: {
headerDark: true
}
},{
path: ':city',data: {
headerDark: true
},children: [
{
path: ':category',component: HomeComponent
},{
path: 'search',component: SearchComponent,data: {
headerDark: true
}
},]
},]
}
];
UPD： 我使用两个模块：
const routes: Routes = [
{
path: '',loadChildren: () => import('./modules/basic/basic.module').then(mod => mod.BasicModule),runGuardsAndResolvers: 'always'
},{
path: 'dashboard',canActivate: [AuthService],loadChildren: () => import('./modules/dashboard/dashboard.module').then(mod => mod.DashboardModule)
},{
path: '**',redirectTo: '/'
}
];
UPD 2：示例https://stackblitz.com/edit/angular-ghafx6?file=src%2Fapp%2Forders%2Forders-routing.module.ts
解决方法
这是因为在您的代码中，您首先在function checkCookie() {
if (document.cookie.indexOf("accpttrms") <= 0) {
document.getElementById("disclaimer").style.display = "block";
} else {
document.getElementById("disclaimer").style.display = "none";
}
}
function setCookie() {
if (document.cookie.indexOf("accpttrms") <= 0) {
document.cookie = "accpttrms=yes";
var x = document.getElementById("disclaimer");
x.style.display = "none";
}
}
之前初始化了<body onload="checkCookie()">
<section id="disclaimer" style="display:none;">
<div class="disholder">
<h4>PLEASE REVIEW OUR UPDATED PRIVACY & COOKIES NOTICE</h4>
<p>This site uses cookies and similar technologies...
<a href="/privacy-policy/">Read our updated Privacy & Cookies Notice</a> to learn more.
</p>
<div><a href="#" onclick="setCookie()">I ACCEPT</a></div>
</div>
<div class="clear"></div>
</section>
</body>
，因此将/:category关键字读为类别参数。
尝试将路线重新排序至：
search更新：
您也可以使用此方法尝试多个参数实例。 记下订单。
方法1：
已附加StackBlitz Demo供参考。您也可以检查它的控制台
search方法2：
基于上述路线，并测试了您想在children: [
{
path: 'search',component: SearchComponent,data: {
headerDark: true
}
},{
path: ':category',component: HomeComponent
},]
下在这些路线上执行的操作，是要在CityComponent下还是在HomeComponent下渲染这些组件，但不渲染子级？
这是因为您需要在HomeComponent中添加children: [
{
path: ':city/search',component: SearchComponent
},{
path: ':city/:category',component: HomeComponent,},{
path: ':city',component: HomeComponent
}
]
才能呈现子组件。
:city如果您希望将其放置在不同的路线中，则上述方法1解决方案将为您提供帮助。
,如果使用动态路由，则路由顺序非常重要。
这里的问题是，由于search是category，并且在category之前，所以城市名称被认为是dynamic route之后是static route。因此，总是建议dynamic route必须放在结尾。
对于您的问题更改，以这种方式路由将解决您的问题。
const routes: Routes = [
{
path: '',component: BasicComponent,children: [
{
path: '',data: {
headerDark: true
}
},{
path: ':city',data: {
headerDark: true
},children: [
{
path: 'search',data: {
headerDark: true
}
},{
path: ':category',component: HomeComponent
},]
},]
}
];
请参见Stackblitz以供参考
已编辑
根据您的堆叠闪电战，需要进行以下2项更改。
-
city.component.html
添加了
<router-outlet></router-outlet> -
orders.component.html
<a [routerLink]="['/new-york']">
City
</a>
<a [routerLink]="['/new-york/shops']">
Category
</a>
<a [routerLink]="['/new-york/search']">
Search
</a>
<router-outlet></router-outlet>
请参见Stackblitz以供参考