如何在ng-forward中將函數回調從一個組件傳遞到另一個組件

我已經創建了名爲Alert ticker和dropdown的兩個組件。
這兩個是獨立的組件。
所以讓我們來談談。
我在其他名爲Dashboard的其他頁面中使用此警報摘要。
所以我通過callback function從儀表板頁到ticker component和ticker component通過callback function到dropdown component。如何在ng-forward中將函數回調從一個組件傳遞到另一個組件

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

但我無法做到這一點。請指教。

來源

2016-02-14 Ashutosh Singh

什麼回調‘’中‘所以我傳遞的回調函數’回調？'filterData'？什麼是'在'ctrl.filterData' ctrl'？ –

Ctrl爲的別名。控制器，它擁有所有這些數據我想打電話給'onTickerFilterChange（$事件）;'在下拉菜單的變化所以Ticker組件應該通過這個回調函數到下拉請參閱dropdown.html –

我想。再多瞭解一下你的問題nt在儀表板中通知Ticker Selected值已更改？ –

上有關於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 。：

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

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」中重新定義事件發射器。

股票和選擇包含與你問題相同的成員。事件發射器和過濾器的數據。當選擇值改變時，我發出事件（感謝（改變）=「onSelection.emit（$ event.target.value）」）。（onSelection）=「selectValueChanged（$ event）」，所以當儀表板的方法「selectValueChanged」被調用時，事件「selectValueChanged」將被調用， OnSelection」 MySelect的被激發。

來源

2016-02-15 08:09:20

你在正確的軌道上，但你錯過了一件事。您的我的股票在您的模板中具有直接選擇元素，而應該是另一個組件。順便說一句，我有辦法做到這一點。我已經發布了。所以其實我正在開發許多可以在任何地方使用的隔離組件。 –

好吧，所以你想通知父親的父親選擇:)是不是？ –

是的，如果子組件觸發事件，那麼應該執行祖父功能 –

謝謝你們的幫助。

我已經有辦法做到這一點。

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

來源

2016-02-15 06:53:57

如何在ng-forward中將函數回調從一個組件傳遞到另一個組件

回答

相關問題