У меня есть настройка мастер-детали, а также еще один раздел для "редактирования" элемента списка, всего по 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>