2

假设我得到了这个路由配置：

{ 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)']"

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

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

4

1 回答 1

0

好的，所以似乎有一两个错误[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在同一个父组件内 - 就像它们使用辅助路由一样。

任务完成。

于 2016-07-13T14:52:55.187 回答