ルートからルートへのリダイレクト

Question

Router.navigateメソッドを使用してルーティングしようとしています。私は手紙に指示に従いましたが、私はAPI経由でルートするとき、ルートページを再読み込みします。私RootComponentで

は私が

this._router.navigate（[ 'ABC'、 'のPage1を']）を使用しようとしています。アプリケーション/ ABC/XYZ

に私をリダイレクトする必要があります。しかし、私は直接私のブラウザからapplication/abc/xyzを訪問した場合、それがシームレスに

app.component.ts

import {Component} from "angular2/core"; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router"; 
import {RootComponent} from "./components/root.component"; 
import {Page1Component} from "./components/page1.component"; 


@Component({ 
    selector: 'app', 
    template: '<router-outlet></router-outlet>', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ 
     ROUTER_PROVIDERS 
    ] 
}) 

@RouteConfig([ 
    { 
     path: '', 
     name: 'Root', 
     component: RootComponent, 
     useAsDefault: true 
    }, 
    { 
     path: '/abc/...', 
     name: 'ABC', 
     component: ABCComponent 
    } 
]) 

export class AppComponent { 
} 

ABCComponentを働いています

@Component({ 
    selector: 'abc', 
    template: '<router-outlet></router-outlet>', 
    directives: [ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    { 
     path: '/xyz', 
     name: 'Page1', 
     component: Page1Component 
    } 
]) 
export class ABCComponent{ 

    constructor(private _router:Router){ 
    } 

} 

Page1Component

import {Component} from "angular2/core"; 
import {Router} from "angular2/router"; 

@Component({ 
    selector: 'page1', 
    template: '<h1>Page1</h1>' 
}) 

export class Page1Component{ 

    constructor(private _router:Router){ 
    } 
} 

私が間違って何をしているのですか？

EDIT

はそれを説明するためにも、簡単に言え

である私は何をしようとしています

       Application (2 routes at root level) 
            |      | 
      Default ("/") - Root Component    /abc/ ABC Component 
                  | 
                 /abc/xyz Page1 Component 

は、ルート・コンポーネントからのPage1に移動します。リバースはS.alemのplunkrからenineering後

ソリューション

を、ここで解決

http://plnkr.co/edit/F1p6aQNJ7lREHCiVnKEP?p=preview

Answer 1

メインルータ（AppComponentのルータ）を使用してみてください。あなたはこのような方法でそれを取得することができます。

getMainRouter(router?: Router):Router { 
    if (router.parent === null) { 
    return router; 
    } 
    return this.getMainRouter(router.parent); 
} 

だからあなたRootComponentはこのようなものになることができます。ここでは

// imports... 

@Component({ 
    selector: 'root', 
    template: '<h1>Root Component</h1>' 
}) 

export class RootComponent{ 

    private _mainRouter: Router; 

    constructor(private _router:Router){ 
     this._mainRouter = this.getMainRouter(this._router); 
    } 

    routeToSomewhere():void { 
     this._mainRouter.navigate(['./ABC', 'Page1']); 
    } 

    private getMainRouter(router?: Router):Router { 
     if (router.parent === null) { 
      return router; 
     } 
     return this.getMainRouter(router.parent); 
    } 
} 

を表示するplunkerです。私はヒーローチュートリアルをフォークしましたが、ルート設定がAppComponentになっていれば、関連するコードを見ることができます。別のウィンドウでプランナーを起動して、ブラウザのURLを確認します。

Answer 2

実際にルータがあなたの設定に従っているです。あなたは2つのパス設定されている： - RootComponent

/abc/xyzにマッピング -

• /をPage1Component にマッピングされ、この成分は、階層の同じレベルにあると考えられます。したがって、コンポーネントはナビゲーション中に互いに置き換えられます。

ネストされたコンポーネントを使用する場合は、子ルータと非終端ルートを使用する必要があります。これをチェックしてくださいquestion。

Answer 3

Plunker example

@Component({ 
    selector: 'page1', 
    template: `<h1>Page1</h1> 
    <button (click)="navigateRoot()">to root</button> 
    ` 
}) 
export class Page1Component{ 

    constructor(private _router:Router){} 

    navigateRoot() { 
     this._router.navigate(['/Root']); 
    } 
} 

サーバーはHTML5 pushStateをサポートしていることを確認または代わりHashLocationStrategyを持つことが望ましい動作である何

import {bootstrap} from 'angular2/platform/browser'; 
import {provide} from 'angular2/core'; 
import {AppComponent} from './app'; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 
import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common'; 

bootstrap(AppComponent, [ROUTER_PROVIDERS, // ROUTER_PROVIDERS can also be provided at the root component 
    provide(LocationStrategy, {useClass: HashLocationStrategy}]) 
    .catch(err => console.error(err));