代码之家 › 专栏 › 技术社区 › John Theoden

EventMeter将数据发送到非同级组件-角度2

eventemitter angular

0

John Theoden · 技术社区 · 8 年前

我有一个组件,由触发函数的按钮和根据我从服务和该函数获得的数据生成元素的表组成。

但我不得不拆分那个组件,现在我只有一个组件上的按钮,还有另一个组件上的函数和数据表。

在第一个带有按钮的组件中,我将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设置为在函数启动时替换服务订阅。

第二部分:

从“@角度/核心”导入{Component,OnInit,Output,EventEmitter,Input};

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//
}

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

2 回复 | 直到 8 年前

1

3

Ashish Ranjan 8 年前

现在,这将取决于这两个组件之间的关系。如果我们有一个父子关系,并且您希望在子级中单击按钮时调用父级上的方法,那么我们可以使用事件发射器,向我们显示该关系,并且我们可以解释如何执行该操作。

如果它们根本不相关,那么您可以使用一个服务并在那里创建一个主题,它可以是ab观察者,也可以是可观察者。

提供如下服务:

@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();
})

2

1

Spharah 8 年前

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

步骤1: 更改代码,将数据作为@输入,如下所示

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

步骤2:删除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>

成本计算 组件将从服务获取数据并发出它。发出数据时, 更新数据 将调用父组件中的方法,并将数据属性设置为发出的数据。

然后,父级将发送的数据传递给 数据库表 组件作为输入