角度2での兄弟コンポーネントの相互作用

debugcn 投稿 Dev

スタックシャリーニ

1つの親コンポーネントに2つのコンポーネントを含めました。

app.component.html

<div class="row">
  <div class="col-lg-3"> 
    <app-facet></app-facet>
  </div>
  <div class="col-lg-9">
    <app-result></app-result>
  </div>
 </div>

また、2つのメソッドを持つ1つの共有サービスがあります。getData（）およびsetData（）。

getData（）は、データをフィルタリングするためにApp-Facetコンポーネントによって呼び出されます。setData（）は、データを取得するためにApp-Resultコンポーネントによって呼び出されます。

フィルタフォームを持つページの左側に配置されたApp-Facetコンポーネントと、ページの右側に配置されたApp-Filter。

App-Facetコンポーネントからフィルターフォームのフィルターボタンをクリックすると、sharedService.tsファイルでgetData（）メソッドが呼び出されます。

今私の疑問は、App-FacetコンポーネントからgetData（）を呼び出したらすぐに、App-ResultコンポーネントでupdateView（）を呼び出すにはどうすればよいかということです。

完全なコードはこちらから入手できます：https：//stackblitz.com/edit/angular-cf1xie

アムリット

setdata（）でイベントを発行し、そのイベントをサブスクライブしてそのデータを取得するには、EventEmitterが必要です。

このように：パラメータとしてデータを使用してsetdata（）を呼び出す必要があります。

あなたのsharedService.tsファイルで。

import { Injectable, Output, EventEmitter } from '@angular/core';
    @Injectable({
    providedIn: 'root'
     })
export class DataService{
      @Output() open: EventEmitter<any> = new EventEmitter();

    setdata(data){
    this.open.emit(data);
    }
}

でApp-Facet component：

constructor(private data: DataService) { }
functionCall(){
this.data.setdata(data);
}

そして、このデータが必要な関数で。このイベントを次のようにサブスクライブする必要があります。

でApp-Result component：

constructor(private data: DataService) { }
    ngAfterViewInit() {
          this.data.changeClasss.subscribe(data => {
              this.yourData = data


                    });
    }

詳細については、https：//angular.io/api/core/EventEmitterをご覧ください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]