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