創建一個從組件的方法觀察到，被稱爲事件處理程序

我有一個組件，看起來像這樣：創建一個從組件的方法觀察到，被稱爲事件處理程序

@Component({ 
    template: ` 
    ... 
    <child-component (childEvent)="onChildEvent()"></child-component> 
` 
}) 
export class ParentComponent { 
    onChildEvent() { 
     ... 
    } 
}

我要將呼叫轉向onChildFinished方法爲觀察到的序列。

現在，如果有問題的方法是一些「本機」DOM事件的處理程序，如點擊，模糊等，我會用Observable.fromEvent，但在這種情況下，這似乎並不適用（因爲那裏不涉及本地事件）。

，想到的唯一的事情是這樣的：

@Component({ 
    template: ` 
    ... 
    <child-component (childEvent)="onChildEvent()"></child-component> 
` 
}) 
export class ParentComponent implements OnInit, OnDestroy { 
    private childEventStream: Observable<void>; 

    // I am not sure, what is the type of this, 
    // seems like an internal RxJS thing 
    private observer: any; 

    onChildEvent() { 
     this.observer.next(); 
    } 

    ngOnInit() { 
     this.childFinishedStream = Observable.create(
      observer => this.observer = observer; 
     ); 
    } 

    ngOnDestroy() { 
     this.observer.completed(); 
    } 
}

看來，必須有一個更好的辦法，因爲這已經是相當繁瑣的維護，如果有涉及到多個處理程序。

來源

2016-11-21 shylent

難道你不想要一個EventEmitter？

這些都是創建這樣的：

@Component({ 
    template: ` 
     <child-component (finished)="onChildFinished($event)"></child-component> 
    ` 
}) 
export class ParentComponent { 

    onChildFinished(data: number) { 
     //... 
    } 
}

而且使用Output子組件。

@Component({ 
    selector: 'child-component', 
    template : `hi` 
}) 
export class ChildComponent { 

    @Output() 
    public finished: EventEmitter<number> = new EventEmitter<number>(); 

    private _imFinishing(): void { 
     finished.emit(1); 
    } 
}

也許我不理解你的問題，但這似乎是你想要的。

來源

2016-11-21 08:43:10 PierreDuc

這正是它在_child_方面完成的方式（否則我將如何能夠聽到父控制器中的子事件） – shylent

啊，我想現在我明白了。你想排序聽一個孩子的事件完成。這是針對angular2指南的。數據下降，事件上升..更好的是使用服務，並在那裏設置一個「EventEmitter」。讓你的父組件聽取它，並讓你的子組件在那裏處理任何事 – PierreDuc

不，對不起，它與「完成」任何事情無關。也許，我選擇了一個不好的（暗示性的）名字。我編輯了這個問題，遺漏了「完成」一詞。這只是一些事件，是由兒童控制器發出的，沒有特別的意義。 – shylent

創建一個從組件的方法觀察到，被稱爲事件處理程序

回答

相關問題