如何从一个组件传递函数回调到NG-着另一个组件 [英] How to pass function callback from one component to another component in ng-forward

问题描述

我创建了名为两部分组成警示股票代码和下拉菜单。结果
这是两个单独的组件。结果
所以让我们开门见山。结果
我正在使用命名为仪表板其他页面此警报股票。结果
所以我传递从仪表板页面的回调函数到 Ticker组件和 Ticker组件通过这个回调函数到下拉组件。

I have created two components named as Alert ticker and dropdown.
These two are separate component.
So lets come to the point.
I am using this alert ticker in some other page named as Dashboard.
so I am passing the callback function from dashboard page to ticker component and ticker component pass this callback function to dropdown component.

Dashboard.html 的

Dashboard.html

<ticker [data]="data"
  poll-time="10"
  [filter-data]="filterData"
  (on-polling)="onTickerPoll($event);"
  (on-scroll)="onTickerScroll($event);"
  (on-selection)="onTickerFilterChange($event);"></ticker>

Ticker.html 的

Ticker.html

<dropdown  [list]="ctrl.filterData" (on-selection)="ctrl.onSelection($event)" ddl-class="form-control"></dropdown>

Ticker.ts 的

Ticker.ts

@Component({
    selector: 'od-ticker',
    directives: [DropdownComponent],
    templateUrl: '/app/components/ticker/ticker.html'
})

export class TickerComponent {
    @Input() data;
    @Output() onSelection: EventEmitter < string > = new EventEmitter();
}

但我无法做到这一点。
请指点。

But I am unable to do this . Please advice.

推荐答案

有是关于Angular2问题跟踪一个很好的讨论：为什么EventEmitter不能上升。这个讨论这里。

There is a nice discussion on the Angular2 issue tracker about: "Why EventEmitter doesn't bubble up ?". This discussion is here.

所以，我认为，你必须在组件的整个层次揭露事件......

So I think that you have to expose the event in the whole hierarchy of components...

我提出以下解决方案：

Dashboard.ts：

Dashboard.ts :

import {Component} from 'angular2/core';
import {MyTicker} from './my-ticker'

@Component({
  selector: 'dashboard-app',
  template: `<my-ticker [datas]="dashBoardDatas" (onSelection)="selectValueChanged($event)"></my-ticker>`,
  directives: [MyTicker],
})
export class DashboardApp {
  private dashBoardDatas: Array<string>;
  constructor(){
    this.dashBoardDatas = ["toto", "tata"];
  }
  selectValueChanged(value: string){
    console.log('Selected value changed to :' + value);
  }
}

和MyTicker.ts：

And MyTicker.ts :

import {Component, Input, Output, EventEmitter, AfterViewInit} from 'angular2/core';
import {MySelect} from './my-select'

@Component({
  selector: 'my-ticker',
  template: `
  <p>
     <my-select [datas]="datas" (onSelection)="onSelection.emit($event)"></my-select>
  </p>
  `,
  directives: [MySelect]
})
export class MyTicker {
  @Input() datas: Array<string>;
  @Output() onSelection: EventEmitter < string > = new EventEmitter();
  constructor() {}
  ngAfterViewInit(){
    console.log("Datas in ticker : " + this.datas);
  }
}

和MySelect.ts：

And MySelect.ts :

import {Component, Input, Output, EventEmitter} from 'angular2/core';


@Component({
  selector: 'my-select',
  template: `
  <p>
  <select name="filter" (change)="onSelection.emit($event.target.value)">
    <option *ngFor="#item of datas" value="{{item}}">{{item}}</option>
  </select>
  </p>
  `
})
export class MySelect {
  @Input() datas: Array<string>;
  @Output() onSelection: EventEmitter < string > = new EventEmitter();
  constructor() {}
}

我做了以下 Plunkr 来说明这一点。

正如你所看到的，在仪表板，我有我想要触发时，股票的选择变化（selectValueChanged）的内容（即触发，当我选选变化）的方法......所以我们要重新定义MyTicker的事件发射器。

As you can see, in the Dashboard, I have a method that I want to trigger when the content of the ticker's select change (selectValueChanged) (that is triggered when my-select selection change)... So we have to re-define the event emitter in "MyTicker".

该股票，然后选择含有相同的成员作为你的问题。一个事件发射器，以及滤波器的DATAS。当选择值的变化，我发出的事件（感谢（其他城市）=onSelection.emit（$ event.target.value））。
此事件被逮住的股票和再emited，然后通过仪表板擦肩而过（感谢（onSelection）=selectValueChanged（$事件），所以方法selectValueChanged仪表盘被称为当事件OnSelection MySelect的被激发。

The ticker and select contains the same members as in you question. An event emitter, and the filter's datas. When the select value change, I emit the event (thanks to (change)="onSelection.emit($event.target.value)" ). This event is "catched" by the ticker and re-emited, and then catched by dashboard (thanks to "(onSelection)="selectValueChanged($event)". So the method "selectValueChanged" of Dashboard is called when the event "OnSelection" of MySelect is fired.

这篇关于如何从一个组件传递函数回调到NG-着另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！