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>

角度2-我的子路线什么都没打开

2 个答案: