在Angular 4中为动态元素添加事件监听器？

Question

我有一些从API中获取的描述文本，我将其作为HTML插入到DOM中。

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

我想在ngAfterViewInit()中为"more-description"类添加事件监听器。

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

该元素为null，不允许添加事件监听器。我如何将此事件监听器添加到动态添加的HTML元素中？

- David Aguirre

---

尝试在遍历之前运行cdRef.detectChanges()。 - yurzui

我应该在哪里运行这个函数？ - David Aguirre

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示例

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

- yurzui

---

问题在于描述是由服务调用返回的。现在的问题是：“如何将事件侦听器附加到服务调用后追加的动态元素？” - David Aguirre

https://dev59.com/6KDia4cB1Zd3GeqPMPio#43457771 - yurzui

我已经解决了HTML中span标签的问题。 <div class="activity-description"><span [innerHTML]="description"></span><span (click)="displayFullDescription()">...了解更多</span></div> - David Aguirre

很好的回答，只有一个问题，为什么你没有直接调用函数displayFullDescription()，而是使用了this.displayFullDescription.bind(this)？ - SlimenTN

@Sanyami Vaidya 请尝试使用 el.addEventListener('click', this.displayFullDescription.bind(this, param)) 或 el.addEventListener('click', () => this.displayFullDescription(param))。 - yurzui