Angular 4 触发自定义事件 - EventEmitter 与 dispatchEvent()

Question

我正在构建指令，该指令应在元素进入视口(viewport)时添加类，并且还会触发自定义事件。我发现了两种触发事件的方法 - EventEmitter 和 dispatchEvent()，两者都可以正常工作。在这种情况下应该使用哪个，为什么？ (对代码的任何其他建议表示赞赏)

import { EventEmitter, Directive, ElementRef, Renderer2, OnInit } from '@angular/core';
import { HostListener } from "@angular/core";
import { Component, Input, Output, Inject, PLATFORM_ID, ViewChild, ViewEncapsulation } from "@angular/core";
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { AfterViewInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Directive({
  selector: '[animateOnVisible]',
})
export class AnimateOnVisibleDirective implements AfterViewInit {

  @Input() animateOnVisible: string = "fadeInUp";
  @Output() enteredViewport: EventEmitter<string> = new EventEmitter();
  public isBrowser: boolean;
  private enableListener: boolean = true;

  constructor(private renderer: Renderer2, private hostElement: ElementRef, @Inject(PLATFORM_ID) private platformId: any) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  @HostListener("window:scroll", [])
  onWindowScroll() {
    this.checkScrollPosition();
  }

  ngAfterViewInit() {
    this.checkScrollPosition();
  }

  private checkScrollPosition() {
    if (this.isBrowser && this.enableListener && window.scrollY + window.innerHeight / 2 >= this.hostElement.nativeElement.offsetTop) {
      this.renderer.addClass(this.hostElement.nativeElement, this.animateOnVisible);
      this.enableListener = false;
      
      //triggering custom event
      this.enteredViewport.emit("");

      //OR
      this.hostElement.nativeElement.dispatchEvent(new Event('enteredViewport', { bubbles: true }));
    }
  }
}

<div class="animated" [animateOnVisible]="'test'" (enteredViewport)="test()">

Answer 1

EventEmitter 用于可用于 Angular 事件绑定(bind)的 @Output()

<my-component (myEvent)="doSomething()"

dispatchEvent() 触发一个 DOM 事件，它也可以像 Angular @Output() 事件那样被绑定(bind)，但也可以向上冒泡 DOM 树.

前者是 Angular 特有的，对于更高效的预期用例，后者的行为类似于其他 DOM 事件，也可以被非 Angular 代码监听，但效率可能较低。