Угловое 4: Несколько (названных) роутеров-розеток в дочернем маршруте: поддерживается?

У меня есть настройка мастер-детали, а также еще один раздел для "редактирования" элемента списка, всего по 1 посадке (в моем примере приложения, маршрут есть/материал). Компонент детали заполняется с использованием стандартного маршрутизатора-выхода и находится в /stuff/: index. Я пытаюсь отправить HTML на другой роутер-выход для части редактирования через route/stuff/: index/edit, но Angular не может распознать маршрут.

Я пошел вперед и поставил обобщенную версию ситуации на Bitbucket:

https://bitbucket.org/squirrelsareduck/angularrouting/

В любом случае, общая ошибка такова:

Ошибка: не может соответствовать любым маршрутам. Сегмент URL: 'stuff/1/edit'

Наиболее важные части кода:

Определение маршрутов:

const routes: Routes = [
  { path: 'stuff', component: AComponent, children:[
    { path: ':index', component: BComponent},
    { path: ':index/edit', component: EditComponent, outlet:'editsection'}
  ]}
];

a.component.html:

<ul>
  <app-listitem
    *ngFor="let a of items; let indexOI = index;"
    [index]="indexOI"
  [contentOI]="a">
  </app-listitem>
</ul>
<router-outlet></router-outlet>
<router-outlet name="editsection"></router-outlet>

b.component.html:

<p>
  Detail section works! {{ index }}
  <button
    type="button"
    [routerLink]="['edit',{outlets:{editsection:'/stuff/:index/edit'}}]">
    Edit
  </button>
</p>

edit.component.html (менее важно, но важно признать)

<p>
  edit section works!
</p>

Ответ 1

Примените эти изменения в b.component.html и он должен работать b.component.html образом.

<p>
  Detail section works! {{ index }}
 <button type="button"
   [routerLink]="['/stuff',{outlets:{editsection:':index/edit'}}]">Edit</button>
</p>

Для динамического URL-адреса, используя routerLink, сначала укажите, к какому маршруту вы хотите перейти, а затем определите выходы и подпункт, как показано.

Ответ 2

Более мощным подходом будет маршрутизация на основе компонентов. Таким образом, любой компонент может определять свои собственные дочерние маршруты, поэтому маршруты не распространяются на уровне ngModule. Например...

import { Component} from '@angular/core';
import { Routes } from '@angular/router';

@Routes({
    path : "/article/22",
        component : ArticleDetailsComponent,
        outlet : "article-details"
},
{
    path : "/article/22",
        component : ArticlePictureComponent,
        outlet : "article-picture"
})
@Component({
  selector: 'my-component',
  template: '
        <div> 
            <outlet name="article-details"></outlet> 
        <div>
        <div>
            <outlet name="article-picture"></outlet>
        </div>
',
})

export class MyComponent {
  title = 'app works!';
}

Этот пример может быть не лучшим... Но этот подход позволяет мне гораздо больше свободы и власти при разработке сложных архитектур SPA! Маршруты инкапсулируются на уровне компонента, когда я уничтожаю компонент, тогда маршруты удаляются.