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

您有几个错误的配置和不需要的 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>

Answer 2

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

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

如果出口是您组件中唯一的出口，那么您不必命名它。