辅助路线在Angular2 RC5/Router3 RC1中如何工作?
网络上几乎没有任何关于辅助路线的信息,更不用说RC5/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
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 {}