5

有一个组件封装了一些库。为了避免所有这个库的事件监听器的变化检测噩梦，库的范围在角度区域之外：

@Component({ ... })
export class TestComponent {

  @Output()
  emitter = new EventEmitter<void>();

  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
        // ...
    });    
  }

}

这一切都很清楚和普遍。现在让我们添加事件以发出动作：

@Component({ ... })
export class TestComponent {

  @Output()
  emitter = new EventEmitter<void>();

  private lib: Lib;

  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
      this.lib = new Lib();
    });

    this.lib.on('click', () => {
      this.emitter.emit();
    });
  }

}

问题是这个发射器不会触发变化检测，因为它是在区域外触发的。那么可能的是重新进入该区域：

@Component({ ... })
export class TestComponent {

  @Output()
  emitter = new EventEmitter<void>();

  private lib: Lib;

  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
      this.lib = new Lib();
    });

    this.lib.on('click', () => {
      this.ngZone.run(() => this.emitter.emit());
    });
  }

}

最后，我来回答这个问题。this.ngZone.run即使我没有在父组件中监听此事件，这也会强制进行更改检测：

<test-component></test-component>

这是不想要的，因为，好吧，我没有订阅那个事件=>没有什么可检测的。

有什么办法可以解决这个问题？

对于那些对现实生活中的例子感兴趣的人来说，问题的根源就在这里。

4

2 回答 2

4

首先感谢cgTag的回答。它引导我走向更好的方向，它更易读，使用更舒适，而不是 getter 使用 Observable 自然懒惰。

这是一个很好解释的例子：

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());
    }
  }

}

这是另一个示例，其中使用了可观察的库实例（每次重新创建时都会发出库实例，这是很常见的场景）：

  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>;
  }
于 2018-12-10T10:49:12.537 回答
4

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

如果您想绕过对该可观察对象的更改检测，则不要使用@Output装饰器。移除装饰器并通过或使用父组件中的a 访问emtter属性。exportAs@ViewChild

看看反应式表单是如何工作的。控制指令对不使用@Output. 它们只是公共可观察对象，您可以订阅它们。

因此，如果您想要一个不与变更检测耦合的可观察对象，那么只需将其设为公开的可观察对象。这只是保持简单。仅当有订阅者时才添加逻辑来发射，这@Output会使您以后阅读源代码时难以理解组件。

话虽如此，这就是我将如何回答您的问题，以便您@Output()只有在有订阅者时才能使用。

@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();
            });
        }
    }
}

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

于 2018-08-10T14:37:22.120 回答