イベントリスナを角度4の動的要素に追加しますか？

Question

DOMにHTMLとして挿入しているAPIの説明テキストがあります。

<div class="activity-description" [innerHTML]="description"></div> 

説明はngOninit（）内で設定されます。

if (this.eventDetail.description.length > 255) { 
    this.description = this.eventDetail.description.substring(0, 255) + '<span class="more-description"> ...Learn More</span>'; 
} 

私は要素がnullで、イベントリスナーを添付することはできません

var el = this.elementRef.nativeElement.querySelector('.more-description'); 
    if (el) 
     el.addEventListener('click', this.displayFullDescription()); 

）（ngAfterViewInit以内に「より多くの記述」クラスにイベントリスナーを追加しようとしています。このイベントリスナーを動的に追加されるhtml要素に追加するにはどうすればよいですか？

Answer 1

手動cdRef.detectChanges

constuctor(private cdRef: ChangeDetectorRef) {} 

ngOnInit() { 
    if (this.eventDetail.description.length > 255) { 
    this.description = this.eventDetail.description.substring(0, 255) + 
         '<span class="more-description"> ...Learn More</span>'; 
    } 
} 

ngAfterViewInit() { 
    this.cdRef.detectChanges(); 
    var el = this.elementRef.nativeElement.querySelector('.more-description'); 
} 

更新

を呼び出すことによって、ビューをレンダリングすることができますがおそらく、あなたは

el.addEventListener('click', this.displayFullDescription()); 

私はdisplayFullDescription機能が何をするか分からない、このコードでは、いくつかのミスを犯しました。ここで

は一例に

@Component({ 
    selector: 'event', 
    template: ` 
    <div class="activity-description" [innerHTML]="description"></div> 
    `, 
}) 
export class Event { 
    @Input() eventDetail: any; 

    description: string; 

    constructor(private elementRef: ElementRef) { } 

    ngOnInit() { 
    if (this.eventDetail.description.length > 255) { 
     this.description = this.eventDetail.description.substring(0, 255) + '<span class="more-description"> ...Learn More</span>'; 
    } 
    } 

    displayFullDescription() { 
    this.description = this.eventDetail.description; 
    } 

    ngAfterViewInit() { 
    var el = this.elementRef.nativeElement.querySelector('.more-description'); 
    if(el) { 
     el.addEventListener('click', this.displayFullDescription.bind(this)); 
    } 
    } 
} 

Plunker Example