Угловое 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! Маршруты инкапсулируются на уровне компонента, когда я уничтожаю компонент, тогда маршруты удаляются.