2017-08-30 31 views
1

我試圖在該方法內從NgLoopDirective處理事件成功接收的NgDNDirectiveEV,通過引用傳遞EventEmitter對象並調用.subscribe()如下代碼中描述EventEmitter的事件:角:不是經由.subscribe

import { Directive, Input, ElementRef, Renderer2, EventEmitter } from '@angular/core'; 

@Directive({ 
    selector: '[ngDN]' 
}) 
export class NgDNDirective { 

    private dn: number = -1 
    private ev: EventEmitter<void>; 

    @Input() set ngDN(dn: number) { 
    this.dn = dn 
    } 

    @Input() set EV(ref: {ev: EventEmitter<void>}) { 
    console.log('waiting for ev') 
    ref.ev.subscribe(() => { 
     console.log('data-num:', this.dn) 
     this.renderer.setAttribute(this.elRef, 'data-num', this.dn.toString()) 
    }) 
    } 

    constructor(private elRef: ElementRef, 
       private renderer: Renderer2) {} 

} 

@Directive({ 
    selector: '[ngLoop]' 
}) 
export class NgLoopDirective { 

    @Input() set ngLoop(iter_count: number) { 
    this.container.clear() 
    for (let i=0; i<iter_count; i++) { 
     let ev: EventEmitter<void> = new EventEmitter<void>() 
     let ref = {ev: ev} 

     this.container.createEmbeddedView(this.template, {index: i, ev: ref}) 
     ev.emit() 
    } 
    } 

    constructor(private template: TemplateRef<any>, 
       private container: ViewContainerRef) {} 

} 

這是用HTML代碼:

​​

當調試控制檯下的代碼 - 我得到僅顯示這樣的信息:

等待EV

這意味着該事件未成功處理爲console.log('data-num:', this.dn)不叫。

什麼應該導致問題?

回答

2

發出事件後,角運行會更改NgDNDirective的檢測。

因此,無論運行變化手動檢測:

const view = this.container.createEmbeddedView(this.template, {index: i, ev: ref}); 
view.detectChanges(); 

Plunker Example

或使用ReplaySubject,而不是EventEmitter

Plunker Example

+0

這是一個非常INTERES知情 - 我學到了一件新事物。非常感謝。 – Kais