Javascript 在Angular 4中向动态元素添加事件侦听器？

我有一些来自API的描述文本，我正在将其作为HTML插入DOM中

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

---

元素为null，不允许附加事件侦听器。如何将此事件侦听器添加到动态添加的html元素中

您可以通过调用

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

我不知道

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

@组件({
选择器：“事件”，
模板：`
`,
})
导出类事件{
@Input（）eventDetail：任意；
描述：字符串；
构造函数（私有elementRef:elementRef）{}
恩戈尼尼特（）{
如果（this.eventDetail.description.length>255）{
this.description=this.eventDetail.description.substring（0255）+“…了解更多信息”；
}
}
displayFullDescription（）{
this.description=this.eventDetail.description；
}
ngAfterViewInit（）{
var el=this.elementRef.nativeElement.querySelector（“.more description”）；
如果（el）{
el.addEventListener（'click'，this.displayFullDescription.bind（this））；
}
}
}

---

注意：最好将处理程序存储在类属性中，以便以后可以取消订阅。

在遍历之前尝试运行

cdRef.detectChanges（）

在哪里运行函数？这不起作用。事件侦听器从未被附加。因此问题在于描述是由服务调用返回的。所以现在的问题是：“如何将事件侦听器附加到附加在服务调用之后的动态元素？”创建plunker来复制它。正如我前面所说，您可以调用

cdRef.detectChanges（）

在初始化后更新视图

description

@Sanyami Vaidya Try

el.addEventListener（'click'，this.displayFullDescription.bind（this，param））

或

el.addEventListener（'click'，（）=>this.displayFullDescription（param））

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

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