角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コンポーネントのアウトレット。プロファイルリンクをクリックするとリンクは機能しますが、ユーザーアカウントページ（サブセクション）の下にプロファイルコンポーネントがレンダリングされます。プロファイルリンクをクリックするとメインルータの出口、つまりアプリケーションのルータ出口にコンテンツを表示する必要があります成分。

別の問題は、現在、アカウントコンポーネントを追加する必要があります。そうでなければ、ルータは「アカウント」という単語を含むURLを許可しません。いくつかのプレフィックスを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.

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) {} 
} 

に使用するパスのルートを含むようにその後AppComponentニーズ現在のルートの順序は重要です。より重要なルートが最初に来る必要があります。この場合、/accountで始まるすべてのルートに/accountが一致するため、逆順では/account/userが見つかりません。

Plunker example