Question

我的申请有两个主要领域 - 一个免费，一个私人。每个人都需要拥有自己的导航栏和内容。因此，我有一个路由器插座，我希望两个区域都被渲染，一次一个 - 任何用户的免费区域和登录用户的私人区域。

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，即我的登陆＆＃34;页面＆＃34; （报价因为我们知道它是SPA）。

在限制区域，默认值为WelcomeComponent，这只是一个欢迎＆＃34;页面＆＃34; （报价因为我们知道它是SPA）。

由于上述行为，路由规则如下：

应用-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，因为我放了一个console.log 在其ngOnInit中，它被记录并且限制导航栏被渲染
canActivateChild规则是返回肯定，我的意思是，它认识到用户已登录。
未触发WelcomeComponent。我在其ngOnInit上放了一个console.log，没有在控制台上记录任何内容。

如果在孩子的路上重复路径不是问题，为什么会这样？

Answer 1

您意识到可以通过以下途径到达受限制的2名儿童：

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)

希望有所帮助

Angular2：路由限制孩子无法工作

1 个答案: