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（）。

AppDataFacet组件调用

getData（）来过滤数据。 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

角度2中的同级组件交互

1 个答案: