Angular 2: Восстановить компонент дочернего маршрута Родитель в маршрутизаторе

Есть ли способ отобразить дочерний маршрут в родительском маршруте <router-outlet>?

Например, допустим, у нас есть два маршрута:

/users/12345

/users/12345/orders/12345

Мне нужно, чтобы второе было дочерним по отношению к первому, но мне также необходимо полностью заменить содержимое /users/12345 содержимым /users/12345/orders/12345, противоположным наличию /users/12345/orders/12345 в /users/12345 sub router-outlet.

Я думал, что смогу сделать это, просто называя роутер-розетку родительского уровня, и оба маршрута нацелены на него, но из исследования, которое я делал (и ошибок, которые он вызвал), я чувствую, что имена были предназначены для вторичное использование, когда уже существует основной маршрутизатор-выход

Ответ 1

У меня была такая же проблема. Вот как я его исправил:

const routes: Routes = [
   {
    path: '',
    children: [
         {
           path: '',
           component: ParentComponent,
         },
         {
           path: 'child',
           component: ChildComponent,
         }
     ]
   }
];

Ответ 2

Вы можете сделать это, установив свои маршруты следующим образом:

const routes : Routes = [
  { 
    path : 'user/:id',
    component : ParentComponent,
    children : [
      { path : '', component : UserComponent },
      { path : 'order/:id', component : OrderComponent }
    ]
  }
]

Шаблон ParentComponent будет иметь только <router-outlet> для загрузки своих дочерних элементов.

Ответ 3

Если вам нужно что-то скрыть (например, сетку данных или панель инструкций), основываясь на активном дочернем маршруте, вы можете просто использовать это:

<div *ngIf="outlet.isActivated == false">
   Please select a child route!
</div>

<router-outlet #outlet="outlet"></router-outlet>

Важно включить #outlet="outlet" в кавычки, поскольку вы экспортируете ссылку на переменную шаблона.

В router-outlet также есть события для активации и деактивации.

Альтернативой является получение дочернего маршрута, когда происходит событие NavigationEnd, а затем принятие решения о том, что показывать или скрывать. В более простых случаях первый подход должен работать нормально.

Не думаю, что это также относится к вашему вопросу, но вы можете полностью скрыть router-outlet с *ngIf, как и все остальное.

Ответ 4

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

Пример кода/демонстрации можно найти здесь: https://stackblitz.com/edit/angular-routing-page-layout

Обновленная версия (2019):https://stackblitz.com/edit/angular-routing-page-layout-cnjpz8

Ответ 5

 let routes = [
  { 
    path: 'users/:id',
    component: UsersComponent
  },
  {
    path: 'users/:id/orders/:id',
    component: OrdersComponent
  }
 ];