angular - 不将 附加到 cdk-overlay-container

Question

我遇到了一个奇怪的问题，即 mat-select 停止打开。
我将使用该应用程序，mat-selects 将打开并让我选择一个选项。那我以后再回来，就打不开了。它非常随机地发生并且非常不可预测。
我注意到当我单击元素时，它仍然附加 aria-owns 属性并将选项(见下文)添加到该属性，但它不再将选项添加到 cdk-overlay 容器。
我在控制台中没有任何浏览器错误。
编辑
我一直在看 Chrome Dev Tools 中的性能监视器，CPU 使用率总是很低，JS 堆大小从未真正增加。
它也发生在我们所有的 mat-select 上，甚至在不同的页面上。
Mat-Select 代码

<mat-select [value]="column.source" class="bg-neutral-2 padding-2 line-height-4 border-radius-3 box-xs" placeholder="- select -" (selectionChange)="onColumnChange($event.value, columnIndex)">
    <mat-option class="font-size-1" value="ignore" *ngIf="column.source">- ignore -</mat-option>
    <mat-option class="font-size-1" *ngFor="let source of sortedSourceColumns" [value]="source.value" >{{source.name}}</mat-option>
</mat-select>

单击元素
当我单击该元素时，它会将 mat 选项附加到 mat-select aria-owns 属性，但这些选项不会添加到 cdk 覆盖容器中。
垫子选择

<mat-select _ngcontent-c5="" class="bg-neutral-2 padding-2 line-height-4 border-radius-3 box-xs mat-select ng-tns-c7-6 mat-select-empty" placeholder="- select -" role="listbox" id="mat-select-4" tabindex="0" aria-label="- select -" aria-required="false" aria-disabled="false" aria-invalid="false" aria-multiselectable="false" aria-owns="mat-option-21 mat-option-22 mat-option-23 mat-option-24 mat-option-25 mat-option-26 mat-option-27 mat-option-28 mat-option-29 mat-option-30 mat-option-31 mat-option-32 mat-option-33 mat-option-34 mat-option-35 mat-option-36 mat-option-37" aria-activedescendant="mat-option-21"><div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin=""><div class="mat-select-value"><!----><span class="mat-select-placeholder ng-tns-c7-6 ng-star-inserted">- select -</span><!----></div><div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div></div><!----></mat-select>

cdk-overlay-container

<div class="cdk-overlay-container"></div>

有什么想法可能导致这种情况？
依赖关系

    "@angular/animations": "~7.0.0",
    "@angular/cdk": "^7.0.4",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/material": "~7.0.4",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",

Answer 1

对于遇到此问题的任何其他人，在我的情况下，它最终成为使用 single-spa 在同一页面上运行 Angular 应用程序的问题，并且两个应用程序都使用了 Angular Material。
Angular Material 使用 cdk-overlay 来附加选项，并且由于有多个应用程序，应用程序会混淆要将选项添加到哪个叠加层。
我通过添加一个自定义类来使用以下代码清理每个微前端中的覆盖层来修复它:
microfrontend-overlay-container.ts

import { OverlayContainer } from '@angular/cdk/overlay';

@Injectable()
export class MicrofrontendOverlayContainer extends OverlayContainer {
  protected _createContainer(): void {
    const containerClass = 'cdk-overlay-container';
    const previousContainers = this._document.getElementsByClassName(containerClass);

    // If there is already a container (can happen in a Microfrontend scenario with
    // multiple self-contained Angular apps on the same website), reuse that. But
    // clean it up because it could be created while transitioning from server
    // to client (Angular Universal) and may be stale. Remove any additional containers.
    for (let i = 0; i < previousContainers.length; i++) {
      while (i === 0 && previousContainers[i].firstChild) {
        previousContainers[i].removeChild(previousContainers[i].firstChild);
      }

      if (i > 0 && !!previousContainers[i].parentNode) {
        previousContainers[i].parentNode.removeChild(previousContainers[i]);
      }
    }

    if (previousContainers.length > 0) {
      this._containerElement = previousContainers[0] as HTMLElement;
      return;
    }

    const container = this._document.createElement('div');
    container.classList.add(containerClass);
    this._document.body.appendChild(container);
    this._containerElement = container;
  }
}

app.module.ts
将此添加到提供者数组中:

{ provide: OverlayContainer, useClass: MicrofrontendOverlayContainer }