<mat-select>不附加<mat-options>到cdk-overlay-容器

Question

我遇到了一个奇怪的问题，那就是垫子的选择停止了。

我将使用应用程序和垫-选择将打开，让我选择一个选项。那我过会儿再来，它就不会开了。它的发生非常随机，而且是非常不可预测的。

我注意到，当我单击元素时，它仍然会追加aria-owns属性，并向该属性添加选项(见下文)，但它不再将选项添加到cdk覆盖容器中。

控制台中没有任何浏览器错误。

编辑

我一直在关注Chrome工具中的性能监视器，CPU使用率总是很低，JS堆的大小也从未真正提高过。

这也发生在我们所有的垫子-选择，甚至在不同的网页。

Mat-选择代码

<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-own属性，但是这些选项不会添加到cdk覆盖容器中。

mat-选择

<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

对于任何其他遇到这种情况的人来说，在我的例子中，这最终是一个问题，就是使用单一spa在同一个页面上运行到有角度的应用程序，而这两个应用程序都使用了角度材料。

角材料使用cdk覆盖来附加选项，并且由于有多个应用程序，应用程序被混淆了添加选项到哪个覆盖层。

我通过添加一个自定义类来清理我的每个微前端的覆盖，并使用下面的代码修正了这个问题：

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 }