Как отобразить компонент в начале приложения, пока он все еще является дочерним компонентом? - PullRequest
Новая
       5

Как отобразить компонент в начале приложения, пока он все еще является дочерним компонентом?

0 голосов
/ 16 апреля 2020

Я создал проект для иллюстрации моей проблемы:

У меня есть родительский компонент, в котором два дочерних компонента должны быть доступны по ссылке 

<p>Child1 should be displayed by default at the start of the app</p>
<!-- <app-child1> </app-child1> --> 
<a [routerLink]="['/child1']" routerLinkActive="router-link-active">Child1</a>
<a [routerLink]="['/child2']"> Child 2</a> 

<router-outlet></router-outlet>

Проблема в том, что на запуск компонента child1 приложения должен отображаться по умолчанию, но при щелчке по ссылке на child2 содержимое дочернего элемента должно исчезнуть. Таким образом, только один из детей должен быть загружен одновременно (роутер-розетка).

Мой модуль маршрутизации 

const routes: Routes = [
  {path: '', component: ParentComponent, children: [
    {path: 'child1', component: Child1Component},
    {path: 'child2', component: Child2Component}
  ]}
];

Как я могу подойти к этой проблеме с Angular маршрутизацией или мне нужно установить некоторые логические значения и использовать * ngIf?

1 Ответ

0 голосов
/ 16 апреля 2020

Добавить перенаправление компонента дочернего маршрута по умолчанию: 

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: 'child1', component: Child1Component },
    { path: 'child2', component: Child2Component },
    { path: '',   redirectTo: '/child1', pathMatch: 'full' },
  ]}
];

и добавить еще один <router-outlet></router-outlet> в родительский компонент. Я создал STACKBLITZ , чтобы проиллюстрировать это. Все компоненты находятся в одном файле ts только для простоты.

Вы можете прочитать больше на официальном сайте .

...