EventEmitter 将数据发送到没有兄弟组件 - Angular 2

Question

我有一个组件，其中包含触发功能的按钮和 table，它根据我从服务和该功能获得的数据生成元素。

但我不得不拆分那个组件，现在我只有一个组件上有按钮，功能和 table 与其他组件上的数据。

在带有按钮的第一个组件中，我这样设置了 EventEmmiter：

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { ConceptService } from "app/services/rest/concept.service";

@Component( {
    selector: 'co-calculation',
    templateUrl: './co-calculation.component.html',
    styles: []
} )

export class CoCalculationComponent implements OnInit {

    dataSent: EventEmitter<any> = new EventEmitter();

    constructor( private conceptService: ConceptService ) { }

    ngOnInit() {}

    calculate(){
      this.conceptService.calculateCoDatabase().subscribe( (response:any) => {

            this.dataSent.emit(response);

           }); } }

在其他组件上，我有一些功能，我想在单击按钮时触发，而不是想设置 emit 以在功能开始时替换服务订阅。

第二个组成部分：

从“@angular/core”导入{组件、OnInit、输出、EventEmitter、输入}；

import { ConceptService } from "app/services/rest/concept.service";
import { CoCalculationComponent } from "app/components/02_top/scm/co-calculation/co-calculation.component";

@Component( {
    selector: 'co-database-table',
    templateUrl: './co-database-table.component.html',
    styles: []
} )
export class CoDatabaseTableComponent implements OnInit {

    data;

    constructor( private conceptService: ConceptService ) {  }

    ngOnInit() {
    }

    generateTable(){

        this.conceptService.calculateCoDatabase().subscribe( (response:any) => {

            this.data = response;
            console.log('data'); 
//rest of function is irrelevant//
}

我不知道如何在第二个组件中触发函数并从第一个组件传递发射而不是服务订阅。谢谢

Answer 1

现在，这将取决于现在两个组件之间的关系。如果我们有父子关系，我们可以使用事件发射器，并且您想在单击子按钮时调用父对象的方法，向我们展示这种关系，我们可以解释如何去做。

如果它们根本不相关，那么你可以使用一个服务并在那里创建一个 Subject，它既可以是观察者也可以是 Observable。

有这样的服务：

@Injectable()
export class ActionService {

  private actionSource = new Subject<boolean>();
  actionSourceObservable = this.actionSource.asObservable();

  constructor() { }

  buttonClicked() {
    this.actionSource.next(true)
  }

}

现在，在两个组件中注入服务，在第一个组件中，当您单击按钮时调用一个函数，如：

foo() {
    // do your job here and then:
    this.actionService.buttonCliked();
}

在其他组件中，在您的 ngOnInit()

中添加类似的内容

this.actionService.actionSourceObservable.subscribe(() => {
    // call the function in the second component, for example
    secondCompFunc();
})

Answer 2

假设您有一个包含 <cost-calculation></cost-calculation> 和 <cost-database-table></cost-database-table> 组件的父组件。

第一步：更改您的代码以像这样将数据作为@Input

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { ConceptService } from "app/services/rest/concept.service"; import { CostCalculationComponent } from "app/components/02_top/scm/cost-calculation/cost-calculation.component";

import * as OC from "oc-core-client";

@Component( { selector: 'cost-database-table', templateUrl: './cost-database-table.component.html', styles: [] } ) export class CostDatabaseTableComponent implements OnInit {

@Input() data:any;

constructor( private conceptService: ConceptService ) {  }

ngOnInit() {
}

}

通知data现在是@Input() data:any

Step2: 去掉generateTable()方法，数据会在onChange lifeCycle

第 3 步：在您的父组件上将数据声明为变量并创建将数据作为参数的方法，如下所示

data:any

// 为简单起见删除了代码

updateData(data:any){
 this.data = data;
}

第 4 步：在您的父模板中添加以下内容

<cost-calculation (dataSent)=updateData($event)></cost-calculation>

<cost-database-table [data]="data"></cost-database-table>

cost-calculation 组件将从服务获取数据并发出它。当数据发出时，将调用父组件中的 updateData 方法，它将数据属性设置为发出的数据。

父级然后将发出的数据作为输入数据库-table组件

EventEmitter 将数据发送到没有兄弟组件 - Angular 2

EventEmmiter send data to no sibling component - Angular 2

eventemitter

angular