web-dev-qa-db-ja.com

親からルーターアウトレットコンポーネントにアクセスする

次のアプリルートがあります。

_@Component({
    selector: 'my-app',
    providers: [],
    templateUrl: `<button (click)="callChildFunction()">Close</button>
                  <router-outlet></router-outlet>`
})
export class AppComponent {

    constructor() {

    }

    callChildFunction(){
        // Call myFunction() here
    }

}
_

そして、ここに私の子（_router-outlet_で使用されるコンポーネント）：

_@Component({
    selector: 'child',
    providers: [],
    templateUrl: `<div>Hello World</div>`
})
export class ChildComponent {

    constructor() {

    }

    myFunction(){
        console.log('success');
    }

}
_

RouterOutlet を使用してコンポーネント関数を取得できることを発見しましたが、アプリのルート内からはアクセスできないようです。

アプリのルートからmyFunction()を呼び出すにはどうすればよいですか？

angularangular-router
17
ncohen

同じためにactivateイベントを使用します。ルーターアウトレットにコンポーネントを読み込むたびに、アクティブ化イベントが発行され、それを使用してコンポーネントrefを取得し、それぞれのメソッドを呼び出します。

親コンポーネント

  <div class="container">
    <router-outlet (activate)="onActivate($event)"></router-outlet>
  </div>

テンプレート

  onActivate(componentRef){
    componentRef.works();
  }

チャイルドコンプ

 works(){
    console.log("works");
  }
29
Rahul Singh

ルーターアウトレットは、子コンポーネントメソッドへのアクセスとは関係のないルーティングに関連しています。親から子コンポーネント関数にアクセスするには、@ ViewChildを使用する必要があります。例を見つけることができます here

update

上記の方法で解決できない場合は、アクティブ化イベントをタップして、ルーターアウトレット内のインスタンス化されたコンポーネントの参照を取得できます。

ドキュメントから

ルーターアウトレットは、新しいコンポーネントがインスタンス化されるたびにアクティブ化イベントを発行し、コンポーネントが破棄されると非アクティブ化イベントを発行します。

したがって、これらの機能を使用して作業を完了できます。詳細な回答 here が表示され、同じ回答にプランカーが添付されています

2
Vikhyath Maiya

@Rahul Singhへの小さな追加素晴らしい答え：

必ず確認してください。どのコンポーネントインスタンスが
（Rahulの例に留まる）onActivate(componentRef)メソッド、
そして、そのコンポーネントに実際にそのようなメソッドがある場合にのみ、works()を呼び出します。

例：

     onActivate(componentRef){
       if(componentRef instanceof ChildWithWorksMethodComponent){
         componentRef.works();
         return;
         }
         console.log("This is not the ChildWithWorksMethodComponent");
      }

そうしないと、ルートにナビゲートするたびに、そのようなメソッドを持たないコンポーネントには、コンソールログに次のようなエラーがいっぱいになります。

エラーTypeError：componentRef.worksは関数ではありません

1
Z3d4s