Как работают вспомогательные маршруты в Angular2 RC5/Router3 RC1?

Вряд ли есть какая-либо информация о вспомогательных маршрутах в Интернете, тем более, что для RC5/RC1, я надеюсь, что кто-то здесь, на SO, смог заставить их работать (они должны быть исправлены, или я так слышал, но это об этом),

Я получил следующее объявление маршрутизации:

import {
    RouterModule,
    Routes
} from '@angular/router';

import { ContactsComponent } from './contacts.component';
import { NewContactComponent } from './new-contact.component';

const contactsRoutes: Routes = [
    { path: '', component: ContactsComponent },
    { path: 'new', component: NewContactsComponent, outlet: 'form' }
];

export const contactsRouting = RouterModule.forChild(contactsRoutes);

Вот routerLink а также outlet на ContactsComponent:

<a [routerLink]="['.', 'form:new']"> 
    <button md-fab class="md-fab">
        <md-icon class="md-24">add</md-icon>
    </button>
</a>
<router-outlet name="form"></router-outlet>

Однако это приводит только к сообщениям об ошибках, таким как

Ошибка: не удается сопоставить ни один маршрут: "контакты / форма%3Anew"

У кого-нибудь есть рабочий пример для Angular2 RC5/Router3 RC1?

Источник

2 ответа

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

Учитывая эту настройку маршрутизации

const appRoutes: Routes = [
    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
    { path: 'welcome', component: WelcomeComponent },
    { path: 'employee/:id', component: EmployeeDetailComponent }
    { path: 'chat', component: ChatComponent, outlet: 'aux' }
];

то есть с помощью вспомогательного маршрута в корневом пути (об этом я упоминал) я могу написать

<a [routerLink]="['/', { outlets: { primary: 'employee/14', aux: 'chat' } }]"

и это переводится на этот маршрут:

/employee/14(aux:chat)

Нажав на эту ссылку, вы фактически визуализируете компонент в розетке,

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

@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet><router-outlet name="aux"></router-outlet>'
})
export class AppComponent {}

Полный PLNKR можно найти здесь.

Как только я получу это для дочерних компонентов, я обновлю этот ответ.

Источник

Насколько я знаю, это должно быть что-то вроде

<a [routerLink]="[{ outlets: { 'aux': ['/employee/14/chat'] } }]">

Смотрите также https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

Источник
Другие вопросы по тегам