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

我已经创建了两个组件，分别命名为

警报提示器

和

下拉列表

这两个是独立的组件。
那么，让我们来谈谈重点
我正在另一个名为Dashboard的页面中使用此警报提示器。
因此，我将

回调函数

从仪表板页面传递到

ticker组件

，并

ticker组件

将此

回调函数

传递到

下拉组件

Dashboard.html

Ticker.html

Ticker.ts

@组件({
选择器：'od ticker'，
指令：[下拉组件]，
templateUrl:“/app/components/ticker/ticker.html”
})
导出类TickerComponent{
@输入（）数据；
@选择时的输出（）：EventEmitter=新的EventEmitter（）；
}

但我无法做到这一点。

---

请给出建议。

谢谢大家的帮助

我有办法做到这一点

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

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

@Output（）onScroll:EventEmitter=neweventemitter（）；
@选择时的输出（）：EventEmitter=新的EventEmitter（）；
onFilterChange（数据）{
this.onSelection.next（数据）；
}
onScrollEnd（）{
this.onScroll.next（{}）；
}

Ticker.html

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

---

在Angular2问题追踪器上有一个很好的讨论：“为什么EventEmitter不冒泡？”。这一讨论非常重要

因此，我认为您必须在组件的整个层次结构中公开事件

我提出以下解决办法：

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

从'angular2/core'导入{Component}；
从“/my ticker”导入{MyTicker}
@组成部分({
选择器：“仪表板应用程序”，
模板：``，
指令：[MyTicker]，
})
导出类仪表板应用程序{
专用仪表盘数据：数组；
构造函数（）{
this.dashBoardDatas=[“toto”，“tata”]；
}
选择ValueChanged（值：字符串）{
console.log（'所选值更改为：'+值）；
}
}

和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);
  }
}

import{Component，Input，Output，EventEmitter，AfterViewInit}来自'angular2/core'；
从“/my select”导入{MySelect}
@组成部分({
选择器：'我的股票'，
模板：`


`,
指令：[MySelect]
})
导出类MyTicker{
@Input（）数据：数组；
@选择时的输出（）：EventEmitter=新的EventEmitter（）；
构造函数（）{}
ngAfterViewInit（）{
log（“股票代码中的数据：+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() {}
}

import{Component，Input，Output，EventEmitter}来自'angular2/core'；
@组成部分({
选择器：“我的选择”，
模板：`

{{item}}

`
})
导出类MySelect{
@Input（）数据：数组；
@选择时的输出（）：EventEmitter=新的EventEmitter（）；
构造函数（）{}
}

我做了以下说明

正如您所看到的，在仪表板中，我有一个方法，我想在股票代码的选择内容更改时触发它（selectValueChanged）（当我的选择更改时触发）。。。因此，我们必须在“MyTicker”中重新定义事件发射器

ticker和select包含与您问题中相同的成员。事件发射器和筛选器的数据。当select值更改时，我发出事件（由于（更改）=“onSelection.emit（$event.target.value）”）。

---

这个事件被自动售票机“捕获”并重新发出，然后被仪表板捕获（由于“（onSelection）=“selectValueChanged（$event）”。因此，当MySelect的事件“onSelection”被触发时，仪表板的方法“selectValueChanged”被调用。

在“我正在传递回调函数”中的“回调”是什么“？

filterData

？在

ctrl.filterData

中什么是

ctrl

？ctrl是包含所有这些数据的控制器的别名。我想调用

onTickerFilterChange（$event）

关于更改下拉列表。因此，ticker组件应将此回调函数传递给dropdown。请参阅dropdown.htmlI想进一步了解您的问题。是否希望在仪表板中通知您，ticker选择的值已更改？@abarral:是的，我也希望如此。您的方法正确，但错过了一件事。您的my-ticker在您的模板中有direct select元素，而它应该是另一个组件。顺便说一句，我找到了这样做的方法。我已经发布了。因此，实际上我正在开发许多可以在任何地方使用的独立组件。好的，您想通知select之父的父亲：）是吗？是的，若子组件触发事件，那个么应该执行祖父函数

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

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

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() {}
}