Angular 2 - 我的子路由什么都不打开

Question

我的应用程序中有两条路线。一个在另一个里面，例如：Image

点击子路由没有任何反应

我的代码：

App.route.ts:

export const routes: Routes = [
    {path: '', loadChildren: './dashboard/dashboard.module#DashboardModule', component: DashboardComponent},
    {path: 'profile', component: ProfileComponent}
];

App.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(routes)
  ],
...

App.component.html:

<nav>...
<router-outlet></router-outlet>

Dashboard.routes.ts:

export const dashboard: Routes = [
  {path: '', component: DashboardComponent,
    children: [
      {path: '', component: EscapeGameComponent, outlet: 'subOutlet'},
      {path: 'boardGame', component: BoardGameComponent, outlet: 'subOutlet'}
    ]
  }
];

Dashboard.module.ts

@NgModule({
  imports: [
    RouterModule.forChild(dashboard)
  ],
...

Dashboard.component.html

  <p [routerLink]="[{ outlets: { subOutlet: [''] } }]">Escape Game</p>
  <p [routerLink]="[{ outlets: { subOutlet: ['boardGame'] } }]">Board Game</p>
  <router-outlet name="subOutlet"></router-outlet>

为什么当我点击 <p> 时没有任何反应？

Answer 1

-添加一个children 属性到你的父路由，它是一个路由数组，你必须在父元素中有一个router-outlet，例如：

export const routes: Routes = [
 {
  path: 'profile',
  component: ProfileComponent,
  children: [
   {path: 'settings', component: ProfileSettingsComponent}
   {path: 'followers', component: ProfileFollowersComponent}
  ]
 }
];

如果插座是您的组件中唯一的插座，那么您不必为它命名。

Answer 2

您有几个错误的配置和不需要的 subOutlet。

dashboard.routes.ts

export const dashboard: Routes = [
  {path: '', component: DashboardComponent,
    children: [
      {path: '', component: EscapeGameComponent},
      {path: 'boardGame', component: BoardGameComponent}
    ]
  }
];

dashboard.component.html

  <p [routerLink]="['/']">Escape Game</p>
  <p [routerLink]="['/boardGame']">Board Game</p>
  <router-outlet></router-outlet>

Angular 2 - 我的子路由什么都不打开

Angular 2 - My sub routes dont open nothing

routing

angular2-routing

angular