Question

在我的应用程序中，我使用 ResizeObserver 和 MutationObserver 来更改我的面包屑组件。我正在观察外部面包屑容器的大小变化（通过 ResizeContainer），以及用于添加/删除元素的内部容器（通过 MutationObserver），因此面包屑可以在需要时折叠或扩展。以下是我编写的指令中的一些代码段，它们可以正常工作并完成它应该做的事情，而 ng serve 没有任何问题：

...
  ngOnInit(): void {
    this.estimatedBreadcrumbWidth = 0;
    this.registerResizeObserver();
    this.registerMutationObserver();
  }

  private registerResizeObserver() {
    // @ts-ignore
    this.resizeObserver = new ResizeObserver(() => {
      this.resizeObserverTimeoutId = this.debounceObservations(
        this.resizeObserverTimeoutId,
        this.timeoutThreshold,
        () => {
          this.zone.run(() => {
            this.breadcrumbParentContainerWidth = this.elRef.nativeElement.offsetWidth;
            this.emitShouldBeCollapsedEvent();
          })
        }
      )
    });
    this.resizeObserver.observe(this.elRef.nativeElement);
  }

  private registerMutationObserver() {
    this.mutationObserver = new MutationObserver(() => {
      this.mutationObserverTimeoutId = this.debounceObservations(
        this.mutationObserverTimeoutId,
        this.timeoutThreshold,
        () => {
          this.estimatedBreadcrumbWidth = this.calculateBreadcrumbWidth(this.nodeElements);
          this.emitShouldBeCollapsedEvent();
        }
      )
    });
    this.mutationObserver.observe(this.elRef.nativeElement, {
      attributes: true,
      childList: true,
      characterData: true
    });
  }

  private debounceObservations(timeoutId: number, timeoutThreshold: number, operation: () => void): number {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    return window.setTimeout(operation, timeoutThreshold);
  }

...

据我所知，ResizeObserver 回调仍然在区域外运行，所以我使用 NgZone 在区域中手动运行它。

我没有为 MutationObserver 和 ResizeObserver 做任何额外的导入，也没有为它们使用任何特定的 polyfill。

此外，这里是我的 ng version 的输出，以防万一：

Angular CLI: 7.3.9
Node: 12.20.2
OS: linux x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.10
@angular-devkit/build-angular      0.13.9
@angular-devkit/build-ng-packagr   0.13.10
@angular-devkit/build-optimizer    0.13.9
@angular-devkit/build-webpack      0.13.9
@angular-devkit/core               7.3.10
@angular-devkit/schematics         7.3.9
@angular/cdk                       7.3.7
@angular/cli                       7.3.9
@angular/flex-layout               7.0.0-beta.24
@angular/material                  7.3.7
@angular/material-moment-adapter   7.3.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.9
@schematics/angular                7.3.9
@schematics/update                 0.13.9
ng-packagr                         4.7.1
rxjs                               6.5.5
typescript                         3.2.4
webpack                            4.29.0

但是，如果我在生产模式下构建项目，则面包屑的折叠/展开不起作用。在构建过程中或在我提供应用程序之后，我也没有收到任何错误。

有没有人知道为什么会发生这种情况，有没有办法解决这个问题？

如果有的话，我也会对 ResizeObserver 和 MutationObserver 的任何其他替代方案感兴趣。

ResizeObserver 和 MutationOberserver 不适用于生产构建

0 个答案: