Angular 2 - Мои суб-маршруты ничего не открывают - PullRequest
Новая
       19

Angular 2 - Мои суб-маршруты ничего не открывают

0 голосов
/ 21 октября 2018

У меня в приложении два маршрута. Один внутри другого, например: Изображение

При нажатии на суб-маршрут ничего не происходит

Мой код:

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>, ничего не случилось?

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

У вас есть пара неверных настроек и 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>
0 голосов
/ 21 октября 2018

-добавьте свойство children к вашему родительскому маршруту, который является массивом маршрутов, вы должны иметь router-outlet внутри родительского элемента, например: 

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

, если выход является единственнымодин в вашем компоненте, тогда вам не нужно называть его.

...