1

网络上几乎没有任何关于辅助路线的信息，更不用说 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和outleton 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>

但是，这只会导致错误消息，例如

错误：无法匹配任何路由：'contacts/form%3Anew'

有人有 Angular2 RC5/Router3 RC1 的工作示例吗？

4

2 回答 2

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 可以在这里找到。

一旦我让它适用于子组件，我将更新这个答案。

于 2016-08-18T16:45:07.880 回答
1

据我所知，它应该是这样的

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

另请参阅https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

于 2016-08-18T11:04:58.243 回答