Angular 2 RC1 子路由

Question

目前我能够使用 Angular 2 RC1 处理路由的基本情况，例如具有少量链接的主组件，单击它们会在主路由器出口中呈现内容。

类似地，点击子组件中的链接会在子组件路由器出口中呈现其子组件。

我无法完成的是我需要在应用程序的主出口中呈现子组件的情况。

我的url结构如下：

/account/user/
/account/user/profile/
/account/user/otherfeature/

/account/admin/
/account/admin/somefeature
/account/admin/anotherfeature

我有下面的代码，运行时会显示一个主页，并带有指向

的链接

User Account: points to, /account/user/
Admin: points to /account/admin/
User Profile: points to /account/user/profile/

点击以上链接会在 App 组件的 router outlet 中呈现内容，除了 Profile 链接。当我单击配置文件链接时，该链接确实有效，但它在用户帐户页面（作为子部分）下呈现配置文件组件，我想要的是单击配置文件链接应在主路由器出口中呈现内容，即应用程序的路由器出口组件。

另一个问题，目前我必须添加一个帐户组件，否则路由器不允许其中包含“帐户”字样的网址。有没有办法在不将其映射到组件的情况下将一些前缀附加到 url。根据我的理解，当前路由器将 url 段中的 url 切碎并尝试将 url 的帐户部分映射到一个组件，因此我必须有一个组件。请建议任何更好的方法来实现这一点。

应用组件：

import {Component, OnInit} from '@angular/core';
import {Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';

import {AccountComponent} from './account.component';

@Component({
    selector: 'app',
    template: `
        <a href="/index.html">Home</a> |
        <a [routerLink]="['./account/user/']">User Account</a> |
        <a [routerLink]="['./account/user/profile/']">Profile</a> |
        <a [routerLink]="['./account/admin/']">Admin Account</a> |

        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})
@Routes([
    { path: '/account', component: AccountComponent },
])
export class AppComponent {
    constructor(private router: Router) {
    }
}

帐户组件：

import { Component } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { UserAccountComponent } from './user/user-account.component';
import { AdminAccountComponent } from './admin/admin-account.component';

@Component({
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES]
})
@Routes([
    { path: '/user', component: UserAccountComponent },
    { path: '/admin', component: AdminAccountComponent }
])
export class AccountComponent {

    constructor() { }

}

用户帐户组件：

import { Component } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { ProfileComponent } from './profile.component';

@Component({
    template: `
        <h1>User Account</h1>
        <a [routerLink]="['./profile']">Profile</a>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
@Routes([
        { path: '/profile', component: ProfileComponent },
])
export class UserAccountComponent {

    constructor() { }
}

配置文件组件

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

@Component({
    template: `
        <h1>Profile</h1>
    `,
})
export class ProfileComponent {

  constructor() {}

}

Answer 1

我想要的是单击配置文件链接应该在主路由器出口中呈现内容，即应用组件的路由器出口。

那么AppComponent需要包含你在routerLink中使用的路径的路由

@Component({
    selector: 'my-app',
    styles: [':host { display: block; border: solid 3px red;}'],
    template: `
        <!--<a href="/index.html">Home</a> |-->
        <a [routerLink]="['./account/user/']">User Account</a> |
        <a [routerLink]="['/account/user/profile/']">Profile</a> |
        <a [routerLink]="['./account/admin/']">Admin Account</a> |

        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})
@Routes([
    { path: '/account/user', component: UserAccountComponent },
    { path: '/account', component: AccountComponent },
])
export class App {
    constructor(private router: Router) {}
}

目前路线的顺序很重要。更重要的路线需要首先出现。在这种情况下，反向顺序将永远找不到/account/user，因为/account 将匹配所有以/account 开头的路由。

Plunker example