Angular 2のルータで現在のルートのコンポーネントへの参照を取得しますか？

Question

現在のルートのコンポーネントへの参照を取得する明確な方法はありますか？

は、これが動作しているようですが、非常にハックようだ：

this.router.currentInstruction. 
    component.componentType.prototype.somePropertyOrFunction(); 

Answer 1

実際には、あなたの表現で現在のルートに関連するコンポーネントのインスタンスにアクセスすることはできません。コンポーネントタイプのみを取得します。そのため、プロトタイプを使用する必要がありますが、関数への参照を取得し、コンポーネントインスタンスのメソッドを参照しません。

thisキーワード（メソッド内で使用されている場合）は未定義です。ルートがアクティブになったとき

現在のルートに関連するコンポーネントのインスタンスにアクセスするには、共有サービスにこのインスタンスを設定するにはOnActivateフックインターフェースを活用できます。

@Component({ 
    selector: 'some-cmp', 
    template: ` 
    <div>routerOnActivate: {{log}}</div> 
    `}) 
    export class SomeCmp implements OnActivate { 
    constructor(private service:RouteStateService) { 
    } 

    routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) { 
     this.service.setCurrentRouteComponent(this); 
    } 
} 

は次に、あなたがアクセスできるようになりますコンポーネントインスタンスこの方法：

var component = this.service.getCurrentRouteComponent(); 

Answer 2

によってレンダリングインスタンスを格納するために角度が使用するステートフルサービスの一種であるRouterOutletMapを使用してコンポーネントインスタンスにアクセスすることが可能ですディレクティブ。あなたはこれらの型を必要とするかもしれません：

import { Router, RouterOutletMap, RouterOutlet } from '@angular/router'; 

トップレベルoutletMapはrouterの財産ですが、anyにキャストが必要になる場合がありますので、それがTSに表示されていない：

constructor(private router:Router) { 
    const rootOutletMap:RouterOutletMap = (<any>this.router).outletMap; 
} 

RouterOutletMapはjavascriptのですプロパティ_outletsを持つオブジェクト。この_outletsは、コンセント名によるRouterOutletのインスタンスを含むハッシュマップオブジェクトです。アウトレットに名前がない場合、それは「プライマリ」になります。あなたがRouterOutletを得た後には、コンポーネントのインスタンスを取得することができます

const rootOutletMap:RouterOutletMap = (<any>this.router).outletMap, 
     outletsHash = (<any>rootOutletMap)._outlets, 
     primaryOutlet:RouteOutlet = outletsHash['primary'], // 'primary' is the default name 

     component = primaryOutlet.component; // <-- this is the instance 

RouterOutletMapは木なので、ルートマップはように子供たちへの言及があります。ルックアップ手順を編成して、必要に応じて特定のルートのコンポーネントを見つけることができます。あなたはこのように行く場合

// returns an array of all the router-outlets component currently rendered 
private getComponentsChain(routerOutletMap: RouterOutletMap) { 
    const outlets: any = (<any>routerOutletMap)._outlets, 
      outletsList = [], 
      components = []; 

    _.forOwn(outlets, (value: RouterOutlet, key: string) => { 
     outletsList.push(value); 
     components.push(value.component); 
    }); 

    const recursiveComponents = _.flatMap(
     outletsList, 
     (o: RouterOutlet) => this.getComponentsChain(o.outletMap)); 

    return [...components, ...recursiveComponents]; 
} 

/* ...then somewhere in component: */ 
console.log(this.getComponentsChain((<any>this.router).outletMap)); 

いくつかのポイントに注意する：ここでは、再帰的な要素の抽出の一例であるが、将来的に変更される可能性がありますので

• 、非公共の角度の機能を使用していますが、
• ルーターの店舗には独自のリサイクルがあります。間違った瞬間にそれを選んだ場合は、「アウトレットがアクティブ化されていません」というエラーが表示されることがあります。