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

Question

我正在构建指令，该指令应该在元素进入视口时添加类，并且还将触发自定义事件。我找到了 2 种触发事件的方法 -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用于@Output()可用于 Angular 事件绑定的 s

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

dispatchEvent()触发一个 DOM 事件，它也可以像 Angular 事件所示那样绑定@Output()，但也可以在 DOM 树中冒泡。

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