2017-08-30 11 views
1

を介して受信されなかった私は、参照することによって持つEventEmitterオブジェクトを渡すと、以下のコード内で説明するように.subscribe()を呼び出すことにより、NgDNDirectiveの方法EVNgLoopDirectiveからイベントを処理しようとしている::持つ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コードです:私は、コンソールの下でコードをデバッグするとき

​​

は - 私はこのメッセージが表示され得る:

console.log('data-num:', this.dn)が呼び出されなかったなどのイベントが正常に処理されなかったことを意味EV

を待っています。

問題の原因は何ですか?

答えて

2

イベントが発生した後、角度ランは検出をNgDNDirectiveに変更します。手動

だから、どちらかで実行変化検出:

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

Plunker Example

またはこれは非常にinteresである代わりにEventEmitter

Plunker Example

+0

ReplaySubjectを使用私は新しいことを学んだ。どうもありがとう。 – Kais

関連する問題