角度2：ルートパラメータをサブルーチンに渡すにはどうすればよいですか？

Question

角度2 rc.1とタイプスクリプトを使用する。コンポーネントがサブルートにロードされたときに、ルーティングパラメータをコンポーネントに渡すのに苦労しています。私は@angular/router-deprecatedパッケージを使用します。私ルートコンポーネントで

は、Iのような経路を構成：

@RouteConfig([ 
    {path:'/top', name:'Top', component: EndPointComponent}, 
    {path:'/sub/...', name:'Sub', component: MiddleManComponent} 
]) 

をここでは、パラメータ

import {Component} from '@angular/core'; 
import {RouteParams} from '@angular/router-deprecated'; 
@Component({ 
    template: 'Route Params: {{routeParams.params | json}}' 
}) 
export class EndPointComponent{ 
    constructor(private routeParams:RouteParams){} 
} 

を読み取るしようとエンドポイント・コンポーネントここであります仲介コンポーネントとEndPointComponentへのサブルート

import {Component} from '@angular/core'; 
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 
import {EndPointComponent} from "./endpoint.component"; 

@Component({ 
    directives: [ROUTER_DIRECTIVES] 
    template: `<router-outlet></router-outlet>` 
}) 
@RouteConfig([ 
    {path: '/end', name: 'End', component: EndPointComponent, useAsDefault: true} 
]) 
export class MiddleManComponent {} 

routeParamsオブジェクトがEndPointComponentから正常に読み取られるのは、コンポーネントがトップレベルルート（ルートコンポーネントの「Top」という名前のルート）からロードされている場合です。しかし、EndPointComponentに移動してMiddleManComponentに移動すると、パラメータは常に空になります（ルートコンポーネントの「Sub」というルート経由）。

ルートを解決する前に、子ルータは親からのパラメータをスクラブしますか？それはあまり意味がないので、私は何かが欠けていると思う。私の質問は簡単です：どのように私はルートのパラメータをサブルートに渡すのですか？

PS：私はdemo this setupへのプランナーを構築しようとしましたが、なぜアプリケーションが読み込まれないのか分からないときは、私は諦めました。

Answer 1

子ルートは、親ルートとは異なる独自のルートパーマネントのインスタンスを実際に取得します。これは、名前の衝突を回避し、ルーティングされたコンポーネントのカプセル化を容易にするために行われます。

子ルートによってロードされたコンポーネントと親ルートのパラメータを共有できる方法の1つはサービスです。

@Injectable() 
export class RouteParamService { 
    constructor(private routeParams: RouteParams) {} 

    get params() { 
    return this.routeParams.params; 
    } 
} 

@Component({ 
    template: 'Route Params: {{routeParams.params | json}}' 
}) 
export class EndPointComponent{ 
    constructor(private routeParams:RouteParamService){} 
} 

@Component({ 
    directives: [ROUTER_DIRECTIVES] 
    template: `<router-outlet></router-outlet>`, 
    providers: [RouteParamService] 
}) 
@RouteConfig([ 
    {path: '/end', name: 'End', component: EndPointComponent, useAsDefault: true} 
]) 
class MiddleManComponent() { } 

RouteParamServiceはMiddleManComponent同じルートレベルでインスタンス化され、そうRouteParamsの同一のインスタンスを取得します。あなたのサービスがあなたの子供のルートコンポーネントに注入されると、あなたは親ルートparamsにアクセスすることができます。

異なるルートツリーレベルでロードするEndPointComponentのインスタンスが2つ必要な場合は、別のティアの親ルートが必要です。 RootComponentの間にMiddleManComponentとEndPointComponentの両方をカプセル化するルーティングされたコンポーネントです。

RootComponentはルーティングされないため、RouteParamServiceのRouteParamsをそのインスタンスからインスタンス化することはできません。 RouteParamsは<router-outlet>コンポーネントによって提供されます。

Answer 2

"@ angle/router"を使用する： "3.0.0-alpha。6" パッケージに、私は次のようにして親ルート引数を取得することができた：

export class ChildComponent { 

    private sub: any; 

    private parentRouteId: number; 

    constructor(
     private router: Router, 
     private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
     this.sub = this.router.routerState.parent(this.route).params.subscribe(params => { 
      this.parentRouteId = +params["id"]; 
     }); 
    } 

    ngOnDestroy() { 
     this.sub.unsubscribe(); 
    } 
} 

この例では、ルートは次の形式があります。/parent/:id/child/:childid

export const routes: RouterConfig = [ 
    { 
     path: '/parent/:id', 
     component: ParentComponent, 
     children: [ 
      { path: '/child/:childid', component: ChildComponent }] 
    } 
]; 

Answer 3

をあなたはActivatedRoteを注入して取ることができますスナップショット、さらに簡単：

constructor(private route: ActivatedRoute) {}; ngOnInit() { console.log('one of my parents route param:', this.route.snapshot.parent.params['PARAM-NAME']); }

Answer 4

が@angular/router@3.4.7を使用すると、PAにアクセスすることができますレンタルActivatedRouteと

export class ChildComponent implements OnInit { 

    parentRouteId: string; 

    constructor(private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.route.parent.params 
     .subscribe((params: Params) => this.parentRouteId = params['id']); 
    } 
}