Angular2:路由限制子节点不能工作
我的应用程序有两个主要领域-一个免费和一个私人。每个人都需要有自己的导航条和内容。正因为如此，我有一个路由器插座，在这里，我希望两个区域都被呈现，每个区域都是免费的，任何用户都可以使用，而登录用户的私有区域。
app.component.html
<router-outlet></router-outlet>如前所述，FreeAreaComponent和RestrictAreaComponent有自己的导航条和内容。考虑到代码的可重用性，我保留了导航条，只将内容路由为子路由器出口，如下所示：
FreeAreaComponent
<app-free-navbar></app-free-navbar>
<router-outlet></router-outlet>RestrictAreaComponent
<app-restrict-navbar></app-restrict-navbar>
<router-outlet></router-outlet>在空闲区域，需要调用的默认组件是LandingComponent，这是我的登陆“页面”(引号，因为我们知道它是SPA)。
在限制区域，默认的是WelcomeComponent，这只是一个受欢迎的“页面”(引号，因为我们知道它是SPA)。
由于上述行为，路由规则如下所示：
app-routing.module.ts
const appRoutes: Routes =[
{ path: '', component: FreeAreaComponent, children: [
{ path: '', component: LandingComponent, pathMatch: 'full' },
{ path: 'signup', component: SignupComponent },
{ path: 'signin', component: SigninComponent }
]},
{ path: 'restrict', canActivateChild: [AuthGuard], component: RestrictAreaComponent, children: [
{ path: 'restrict', component: WelcomeComponent },
{ path: 'categories', component: CategoriesComponent }
]},
{ path: '**', redirectTo: '', pathMatch: 'full'}];当我试图到达申请，自由区域(登陆页)工作良好，但它不是与限制区域。呈现限制导航条，但内容不呈现。
我有以下几点肯定：
- 到达RestrictAreaComponent，因为我在其ngOnInit中放置了一个console.log，并将其记录下来，并呈现限制导航条。
- canActivateChild规则返回的是正数，我的意思是，它可以识别用户已登录。
- WelcomeComponent没有被触发。我把一个console.log放在它的ngOnInit上，控制台上没有任何记录。
如果在它的子代中重复路径不是问题，为什么会发生这种情况？
回答 1
Stack Overflow用户
发布于 2017-06-07 14:50:33
您要意识到，受限制的两个孩子可以通过以下途径到达：
root/restrict/restrict -> WelcomeComponent (injected into router outlet in RestrictAreaComponent)
root/resitrct/categories -> CategoriesComponent (injected into router outlet in RestrictAreaComponent)如果您只是导航到root/restricted，您将而不是在RestrictAreaComponent内部的路由器插座中注入任何内容。
如果您希望在导航到WelcomeComponent时注入root/restricted，那么您需要更改路由定义。
更新:更改为：
const appRoutes: Routes =[
{ path: '', component: FreeAreaComponent, children: [
{ path: '', component: LandingComponent, pathMatch: 'full' },
{ path: 'signup', component: SignupComponent },
{ path: 'signin', component: SigninComponent }
]},
{ path: 'restrict', canActivateChild: [AuthGuard], component: RestrictAreaComponent, children: [
{ path: '', component: WelcomeComponent, pathMatch: 'full' },
{ path: 'categories', component: CategoriesComponent }
]},
{ path: '**', redirectTo: '', pathMatch: 'full'}];现在您应该能够以以下方式导航：
root/restrict -> WelcomeComponent (injected into router outlet in RestrictAreaComponent)
root/restrict/categories -> CategoriesComponent (injected into router outlet in RestrictAreaComponent)希望它能帮上忙
https://stackoverflow.com/questions/44415764
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号