相对辅助路由的有效[routerLink]是什么样的？

Question

我们说我得到了这条路线配置：

{ path: 'contact', component: ContactComponent, children: [
    { path: ':id', component: ContactDetailComponent },
    { path: 'chat', component: ContactChatComponent, outlet: 'chat' }
]}

如果我导航到

/contact/7

我到达联系方式，但是如何从那里到达辅助路线？也就是说，我需要在[routerLink]中添加什么？

我知道我可以轻松地使用绝对URL，例如

/contact/(7//chat:chat)

但如果我需要在这里使用相对链接怎么办？那要采取什么形式？我试过了

[routerLink]="['chat:chat']"
[routerLink]="['//chat:chat']"
[routerLink]="['(7//chat:chat)']"

等等，但这些都没有创建实际工作的链接（见上文）。

我在RC4上使用路由器3.0.0-beta2。

Answer 1

好的，所以[routerLink]中似乎有一两个错误，所以我不得不想出一个解决方法。正如我在对原始问题的评论中已经暗示的那样，我使用这些辅助路线来导航到模态对话框，例如。

/contacts

将显示联系人列表和

/(contacts//aux:new)

应该在联系人列表的顶部上打开模式对话框，而不是在同一个容器内呈现并隐藏列表。

我通过引入虚拟组件实现了相同的效果

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

@Component({
    selector: 'aux-route-workaround',
    template: ''
})
export class AuxRouteWorkaroundComponent { }

然后路由配置采用

形式

export const ContactsComponentRoutes = [
    { 
        path: 'contacts', 
        component: ContactsComponent,
        children: [
            { path: '', component: AuxRouteWorkaroundComponent },
            { path: 'new', component: NewContactComponent }
        ]
    } 
];

，ContactsComponent的模板变为

template: `
    <contacts-list></contacts-list>
    <router-outlet></router-outlet>
`

所以如果现在我导航到

/contacts

''被激活，即ContactListComponent被渲染，变通组件（其模板为空，因此它不向视图添加任何内容）也是如此。

使用

[routerLink]="['new']"

然后我可以（相对）导航到

/contacts/new

这次为<router-outlet>呈现对话框组件，在同一父组件内显示两个组件ContactsListComponent和NewContactComponent - 就像使用辅助路由一样。

完成任务。