辅助路线在Angular2 RC5/Router3 RC1中如何工作?

辅助路线在Angular2 RC5/Router3 RC1中如何工作?,angular,angular2-routing,angular2-router3,Angular,Angular2 Routing,Angular2 Router3,网络上几乎没有任何关于辅助路线的信息,更不用说RC5/RC1了,我希望有人能设法让他们工作(他们应该已经修好了,或者我听说了,但仅此而已) 我得到了以下路由声明: import { RouterModule, Routes } from '@angular/router'; import { ContactsComponent } from './contacts.component'; import { NewContactComponent } from './new-co

网络上几乎没有任何关于辅助路线的信息,更不用说RC5/RC1了,我希望有人能设法让他们工作(他们应该已经修好了,或者我听说了,但仅此而已)

我得到了以下路由声明:

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);
以下是
Contacts组件上的
路由器链接
插座

<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的工作示例吗?

据我所知,应该是这样的

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

我最终实现了这一点(使用源代码,Luke),现在有一个转折点,但我会继续调查,直到找到完整的解决方案

鉴于此路由设置

const appRoutes: Routes = [
    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
    { path: 'welcome', component: WelcomeComponent },
    { path: 'employee/:id', component: EmployeeDetailComponent }
    { path: 'chat', component: ChatComponent, outlet: 'aux' }
];
也就是说,使用根路径中的aux路由(这是我提到的扭曲),我可以编写

<a [routerLink]="['/', { outlets: { primary: '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 {}
从'@angular/core'导入{Component};
@组成部分({
选择器:“我的应用程序”,
模板:“”
})
导出类AppComponent{}
可以找到完整的plnkr


一旦我把它用于子组件,我将更新这个答案。

不,这几乎等于相同的错误消息。我这里有一个plnkr,但它与我问题中的代码有点不同;无论如何,只要修改
routerLink
就可以了。我发现您的路由配置有点混乱。尚未体验RC.5中的路线(带模块)。我更新了我的答案。生成的URL看起来不错,我不知道它在您的配置中需要什么确切路径(而不是我的答案中的
/employee/14/
)。也可以看《劫掠者》是的,plnkr有点混乱,我已经在那里测试了一些东西。无论如何,清理它,添加你的建议,并得到
无法匹配的任何路线:'employee/14/chat;outlets=%5Bobject%20bject%5D'
-看起来很有希望,但我还没有完全做到,请参阅此处更新的plnkr。我调查了一段时间,但无法实现这一点<代码>员工/14/聊天;outlets=%5Bobject%20bject%5D
看起来不正确。它应该类似于
employee/14/chat(aux:chat)
。感谢您的帮助,非常感谢!我让它为子路由工作,我所做的只是:[routerLink]=“['/parent',{outlet:{aux:'child'}]”不幸的是,单击时,地址栏中会出现外观奇怪的url,刷新会产生错误。。。让我们知道更新
import { Component } from '@angular/core';

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