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元素中？

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

注意：如果您将处理程序存储在类属性中以便以后可以取消订阅，那会更好。

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

1 个答案: