Angular 5->8 升级后，Material 对话框出现在 DOM，但不在屏幕上呈现

Question

完成从 Angular 5 到 8 的升级后，除了 Material 模态对话框外几乎一切正常。使用浏览器调试器，我们可以看到结构在 DOM 中，但没有绘制出来。我们最初使用的是 No-op 动画师模块。当我将它切换到 BrowserAnimations 模块时，会出现动画对话框，但一旦动画完成，它就会在视觉上消失。它仍然存在，您可以与它进行部分交互——如果您单击应该呈现“关闭”按钮的位置，对话框将关闭。（你可以看出这一点，因为 "glass"/grey screen cover 消失了。）我们已经修复了所有单元测试 (2500+)，它们运行 100% 干净，大部分应用程序都按预期工作。只是对话框在视觉上消失了。

我已经尝试过的事情：

通过 Chrome 调试工具将各种项目的 z-index 设置为荒谬的值 (25000)
设置 CSS 通过调试器 "block" 在各种元素上显式显示属性
将 CSS 可见性明确设置为 "visible"
将 CSS 不透明度明确设置为“1”
验证对话框组件都列在它们所在模块的 EntryComponents 中（并且该模块已导入主应用程序模块）

Angular5 一切正常——这绝对是升级的副作用。我怀疑这可能是 Material 与我们正在使用的其他一些模块的交互，这些模块曾经一起玩得很好，但现在不再这样做了。但是，我不确定那可能是什么或如何弄清楚。为此，我们使用的是（package.json 完全）：

  "dependencies": {
    "@angular/animations": "^8.2.1",
    "@angular/cdk": "^8.1.2",
    "@angular/common": "^8.2.1",
    "@angular/compiler": "^8.2.1",
    "@angular/core": "^8.2.1",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "^8.2.1",
    "@angular/material": "^8.1.2",
    "@angular/material-moment-adapter": "^8.1.2",
    "@angular/platform-browser": "^8.2.1",
    "@angular/platform-browser-dynamic": "^8.2.1",
    "@angular/router": "^8.2.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "bootstrap": "^4.3.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.2.1",
    "hammerjs": "^2.0.8",
    "jwt-decode": "^2.2.0",
    "moment": "^2.24.0",
    "ngx-bootstrap": "^5.1.1",
    "pdfjs-dist": "^2.1.266",
    "rxjs": "^6.5.2",
    "ts-helpers": "^1.1.2",
    "tslib": "^1.10.0",
    "velocity-animate": "^1.5.2",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },

在我的 app.module.ts 中，我有以下内容：

@NgModule({
    imports: [
        <<<snip>>> ModalTemplatesModule, 
        BrowserAnimationsModule, <<<snip>>>    ],

然后 ModalTemplatesModule 定义为：

const modalTemplates: any[] = [
    ModalTimeoutComponent,
    ConfirmActionModalComponent,
    // etc...
];

@NgModule({
    imports: [
        SharedModule,
        ReactiveFormsModule,
        FormsModule,
        CommonComponentsModule,
        CommonNonComponentsModule
    ],
    declarations: modalTemplates,
    exports: modalTemplates,
    providers: [
        ConfigService,
        TransactionService
    ],
    entryComponents: modalTemplates
})
export class ModalTemplatesModule {}

我们确实为我们所有的模式创建了一个包装器，然后我们将特定的对话框内容放入其中。因此，如果代码有问题，很可能在 class 中。但这很简单... ModalWrapper 模板：

<div fxLayoutAlign="center center" fxLayout="column" fxFlexFill>
    <div class="modal-wrapper full-width" fxLayout="column" fxLayoutAlign="center center">
        <div *ngIf="showCloseButton" class="full-width" fxLayoutAlign="end end" fxLayout="column" fxFlex="none">
            <button id="closeButton" class="close-button-outside" (click)="close()" #closeButton>
            <span fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="0.5rem">
                <i class="icon-close-hover"></i>
                <span>{{"common.buttons.close" | translate}}</span>
            </span>
            </button>
        </div>
        <ng-content></ng-content>
    </div>
</div>

实际标签位于通过 .

放置在包装器中的组件模板内

ModalWrapperComponent

@Component({
    selector : 'modal-wrapper',
    templateUrl: './modal-wrapper.component.html',
    styleUrls: ['./modal-wrapper.component.scss']
})
export class ModalWrapperComponent {
    @Output() onClose: EventEmitter<void> = new EventEmitter<void>();
    @Input() showCloseButton: boolean = true;

    constructor() {}

    close(): void {
        this.onClose.emit();
    }
}

此时，我运行不知道它为何消失以及如何修复它。希望其他人遇到过这个问题并认识到问题并知道如何解决它！

更新： 如果我为 Chrome 和 "disable all CSS" 使用 WAVE 辅助功能插件，对话框元素会出现在屏幕底部.所以这表明这是一个与风格相关的问题。还有其他方法可以"hide"吗？？

Answer 1

终于想通了。在我们的 Angular 5 代码中，我们有一个 material-overrides.scss 文件。其中，有人添加了以下样式：

mat-dialog-container {
  opacity: 0;
  @include transform(translate3d(0, 3.5rem, 0));
  @include transition(opacity $animation-time, -webkit-transform $animation-time);
}

当我注释掉不透明度：0 时，我的对话框开始出现。不确定为什么我们在 Angular 5 (material 2.0.0-beta) 中有这个。当时似乎没有引起任何问题，但现在却引起了。总之，问题解决了。

Angular 5->8 升级后，Material 对话框出现在 DOM，但不在屏幕上呈现

After Angular 5->8 upgrade, Material dialogs show up in DOM, but do not render on screen

modal-dialog

angular-material

angular-upgrade

angular