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/ 

点击上述链接在路由器呈现内容应用程序组件的出口除了配置文件链接。当我点击配置文件链接时，链接确实工作，但它呈现用户帐户页面下的配置文件组件（作为子部分），我想要的是单击配置文件链接应呈现主要路由器插座中的内容，即应用程序的路由器插座零件。

另一个问题，目前我必须添加一个帐户组件，否则路由器不允许带有“帐户”字的网址。有没有任何方法可以将一些前缀附加到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

what I want is that clicking Profile link should render contents in the main router outlet i.e. router outlet of App Component.

然后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