angular 2 中的同级组件交互

Question

我在一个父组件中包含了两个组件。

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>

我还有一个共享服务，它有两种方法。 getData() 和 setData()。

getData() 由App-Facet 组件调用来过滤数据。 App-Result组件调用setData()获取数据。

App-Facet 组件位于页面左侧，具有过滤器形式，App-Filter 位于页面右侧。

当我从 App-Facet 组件单击过滤器表单中的过滤器按钮时，会在我的 sharedService.ts 文件中调用 getData() 方法。

现在我的疑问是，如何在从 App-Facet 组件调用 getData() 后立即在 App-Result 组件中调用 updateView()。

完整代码可在此处获得：https://stackblitz.com/edit/angular-cf1xie

Answer 1

您需要 EventEmitter 在 setdata() 上发出事件并订阅该事件以获取该数据：

像这样：您应该使用数据作为参数调用 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

angular 2 中的同级组件交互

Sibling component interaction in angular 2

components

interaction

angular