事件发射器事件中ngZone的最佳重入

记住 @Output() 根据定义,发出值的绑定是父级更改检测的触发器。虽然该绑定可能没有任何侦听器,但父模板中可能有引用该组件的逻辑。也许是通过 exportAs 或者 @ViewChild 查询。因此,如果您发出一个值,您将通知父组件的状态已更改。也许将来角度团队会改变这一点,但这就是它目前的工作方式。

如果你想通过观察到的变化检测,那么不要使用 @Output 装饰工。移除装饰器并访问 emtter 通过 出口 或者使用 @视童 在父组件中。

看看反应式表单是如何工作的。控件的指令对不使用 @输出 . 它们只是公众可观察到的,你可以订阅它们。

所以,如果你想拥有一个不与变化检测耦合的可观测数据,那么就让它成为一个公开的可观测数据。这样就简单了。仅当存在 @输出 当您稍后阅读源代码时,会使组件难以理解。

话虽如此,这就是我如何回答你的问题,以便你能利用 @输出() 只有当有订户时。

@Component({})
export class TestComponent implements OnInit {

    private lib: Lib;

    constructor(private ngZone: NgZone) {
    }

    @Output()
    public get emitter(): Observable<void> {
        return new Observable((subscriber) => {
            this.initLib();
            this.lib.on('click', () => {
                this.ngZone.run(() => {
                    subscriber.next();
                });
            });
        });
    }

    ngOnInit() {
        this.initLib();
    }

    private initLib() {
        if (!this.lib) {
            this.ngZone.runOutsideAngular(() => {
                this.lib = new Lib();
            });
        }
    }
}

如果我以后看到这个源代码,我会有点困惑,为什么程序员会这样做。它添加了很多额外的逻辑,这些逻辑无法清楚地解释逻辑正在解决的问题。

首先,感谢 cgTag 的答案。它引导我进入一个更好的方向,更可读,更舒适的使用,而不是getter使用可观察到的自然懒惰。

下面是一个解释得很好的例子:

export class Component {

  private lib: any;

  @Output() event1 = this.createLazyEvent('event1');

  @Output() event2 = this.createLazyEvent<{ eventData: string; }>('event2');

  constructor(private el: ElementRef, private ngZone: NgZone) { }

  // creates an event emitter that binds to the library event
  // only when somebody explicitly calls for it: `<my-component (event1)="..."></my-component>`
  private createLazyEvent<T>(eventName: string): EventEmitter<T> {
    // return an Observable that is treated like EventEmitter
    // because EventEmitter extends Subject, Subject extends Observable
    return new Observable(observer => {
      // this is mostly required because Angular subscribes to the emitter earlier than most of the lifecycle hooks
      // so the chance library is not created yet is quite high
      this.ensureLibraryIsCreated();

      // here we bind to the event. Observables are lazy by their nature, and we fully use it here
      // in fact, the event is getting bound only when Observable will be subscribed by Angular
      // and it will be subscribed only when gets called by the ()-binding
      this.lib.on(eventName, (data: T) => this.ngZone.run(() => observer.next(data)));

      // important what we return here
      // it is quite useful to unsubscribe from particular events right here
      // so, when Angular will destroy the component, it will also unsubscribe from this Observable
      // and this line will get called
      return () => this.lib.off(eventName);
    }) as EventEmitter<T>;
  }

  private ensureLibraryIsCreated() {
    if (!this.lib) {
      this.ngZone.runOutsideAngular(() => this.lib = new MyLib());
    }
  }

}

下面是另一个例子,其中使用了库实例observate(它在每次重新创建库实例时都会发出该实例,这是非常常见的场景):

  private createLazyEvent<T>(eventName: string): EventEmitter<T> {
    return this.chartInit.pipe(
      switchMap((chart: ECharts) => new Observable(observer => {
        chart.on(eventName, (data: T) => this.ngZone.run(() => observer.next(data)));
        return null; // no need to react on unsubscribe as long as the `dispose()` is called in ngOnDestroy
      }))
    ) as EventEmitter<T>;
  }