如何在ng-forward中将函数回调从一个组件传递到另一个组件

时间:2016-02-14 15:25:40

标签: angularjs angular

我创建了两个名为dropdowncallback function的组件 这两个是独立的组成部分 所以,让我们来谈谈。
我在名为Dashboard的其他页面中使用此警报自动收报机 所以我将ticker component从信息中心页面传递到ticker componentcallback function将此dropdown component传递给<ticker [data]="data" poll-time="10" [filter-data]="filterData" (on-polling)="onTickerPoll($event);" (on-scroll)="onTickerScroll($event);" (on-selection)="onTickerFilterChange($event);"></ticker>

Dashboard.html

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

Ticker.html

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

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

Ticker.ts

{{1}}

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

2 个答案:

答案 0 :(得分:0)

谢谢你的帮助。

我已经有了实现这个目标的方法。

@Output() onScroll: EventEmitter<string> = new EventEmitter();
@Output() onSelection: EventEmitter<string> = new EventEmitter();
onFilterChange(data){
  this.onSelection.next(data);
}

onScrollEnd(){
  this.onScroll.next({});
}

Ticker.html

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

答案 1 :(得分:0)

关于Angular2问题跟踪器有一个很好的讨论:&#34;为什么EventEmitter没有冒泡?&#34;。这个讨论是here

所以我认为你必须在整个组件层次结构中公开事件......

我提出以下解决方案:

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:

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:

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)(当我的选择选择改变时触发)...所以我们必须在&#34; MyTicker&#34;。

中重新定义事件发射器

自动收报机和选择包含与您提问的成员相同的成员。事件发射器和过滤器的数据。当选择值改变时,我发出事件(感谢(更改)=&#34; onSelection.emit($ event.target.value)&#34;)。 这个活动是&#34; catched&#34;由自动收报机重新发出,然后由仪表板捕获(感谢&#34;(onSelection)=&#34; selectValueChanged($ event)&#34;。所以方法&#34; selectValueChanged&#34; of当MySelect的事件&#34; OnSelection&#34;被触发时,将调用仪表板。