Угловая вложенная маршрутизация удаляется розеткой основного маршрутизатора - PullRequest
Новая
       13

Угловая вложенная маршрутизация удаляется розеткой основного маршрутизатора

0 голосов
/ 27 июня 2019

У меня есть приложение, в котором у меня есть заголовок и боковая панель.Выглядит это так: 

#app.component.html
<mat-drawer-container class="sidenav-container">

    <app-side-nav></app-side-nav>

  <mat-drawer-content>
    <app-header></app-header>
    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-drawer-content>
</mat-drawer-container>

И конфигурация маршрутизации: 

const routes: Routes = [
  { path: 'identity', loadChildren: './identity-registry/identity-registry.module#IdentityRegistryModule' }
];

Теперь, нажав на идентификатор, identity module загрузит в него вложенное навигационное меню.Модуль идентификации состоит из 3 компонентов (IdentityRegistryComponent, MyIdentityComponent, UsersComponent) и имеет собственную конфигурацию маршрутизации. 

const routes: Routes = [
  {
    path: '',
    component: IdentityRegistryComponent
  },
  {
    path: 'my-identity',
    component: MyIdentityComponent
  },
  {
    path: 'users',
    component: UsersComponent
  }
];

, а вложенный маршрут выглядит следующим образом: 

###IdentityRegistryComponent

<nav mat-tab-nav-bar>
  <a mat-tab-link [routerLink]="['./my-identity']">My Identity</a>

  <a mat-tab-link [routerLink]="['./users']">Users</a>
</nav>
<router-outlet></router-outlet>

Но, к сожалению,всякий раз, когда я нажимаю на личность, он правильно загружает IdentityRegistryComponent.Но нажмите my-identity, пропустите вложенные маршруты и загрузите только соответствующий компонент.Но так не должно быть.Вложенный цикл должен быть там, и при нажатии на my-identity он должен загрузить соответствующий компонент на router-outlet.Я не знаю, как заставить это работать?

Кроме того, есть ли в любом случае, что, если я нажму на идентичность с навигационной панели, он загрузит IdentityRegistryComponent и по умолчанию MyIdentityComponent будет загружен в зону вложенных маршрутов?

для лучшего понимания я добавил ссылку на git: testApp

1 Ответ

1 голос
/ 27 июня 2019

Если вы хотите использовать розетку маршрутизатора для этого модуля, вам необходимо указать компонент для этого «дочернего элемента». 

const routes: Routes = [{
  path: 'identity',
  component: AppComponent,
  loadChildren: './identity-registry/identity-registry.module#IdentityRegistryModule'
}];

Если вы хотите, чтобы все ваши маршруты использовали один и тот же компонент, вы также можете определить его следующим образом: 

const routes: Routes = [{
  path: '',
  component: AppComponent,
  children: [{
      path: 'identity',
      component: NestedNavComponent, // Add a component here for nested router-outlets
      loadChildren: './identity-registry/identity-registry.module#IdentityRegistryModule'
  },{
      path: 'another-route',
      loadChildren: './another-route/another-route.module#AnotherRouteModule'
  }]
}];

Обновление ( См. Ссылку на вложенный компонент, которую я добавил ):

Маршруты работают иерархически, и это включает выходы маршрутизатора во вложенных маршрутах. Приложение построено в слоях для дочерних маршрутов. Если учесть это, вы можете определить свои дочерние маршруты так же, как вы разработали свою логику пользовательского интерфейса.

...