Question

我创建了两个名为dropdown和callback function的组件这两个是独立的组成部分所以，让我们来谈谈。
我在名为Dashboard的其他页面中使用此警报自动收报机所以我将ticker component从信息中心页面传递到ticker component，callback 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}}

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

Answer 1

谢谢你的帮助。

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

@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>

Answer 2

关于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;被触发时，将调用仪表板。

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

2 个答案: