Как передать функцию обратного вызова от одного компонента к другому компоненту в ng-forward

Question

Я создал два компонента с именем Alert ticker и dropdown.
Эти два отдельных компонента.
Итак, давайте перейдем к делу.
Я использую этот предупреждающий тикер на другой странице под названием Dashboard.
поэтому я передаю callback function с страницы приборной панели до ticker component и ticker component передать это callback function в dropdown component.

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

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

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

Но я не могу этого сделать. Пожалуйста, совет.

Answer 1

Существует хорошее обсуждение вопроса трекере Angular2 о: "Почему? EventEmitter не пузыриться". Это обсуждение 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) (которое срабатывает при изменении выбора моего выбора) ... Итак, у нас есть для переопределения эмиттера событий в «MyTicker».

Тикер и выбор содержит те же элементы, что и в вашем вопросе. Излучатель событий и данные фильтра. Когда значение select изменяется, я выделяю событие (спасибо (change) = "onSelection.emit ($ event.target.value)"). Это событие «уловлено» тикером и переизлучено, а затем уловлено панелью управления (благодаря «(onSelection) =« selectValueChanged ($ event) ». Поэтому метод« selectValueChanged »из Dashboard вызывается, когда событие" OnSelection "из MySelect.

Answer 2

Спасибо, ребята, за вашу помощь.

У меня есть способ выполнить это.

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