Angular 材质对话框组件隐藏了我所有的网站组件

# Angular 材质对话框组件隐藏网站组件的解决方案

typescript
   import { Component, ViewEncapsulation } from '@angular/core';
   @Component({
     selector: 'app-dialog',
     templateUrl: 'dialog.component.html',
     styleUrls: ['dialog.component.css'],
     encapsulation: ViewEncapsulation.None  // 禁用 View Encapsulation
   })
   export class DialogComponent {
     // 组件逻辑
   }
   

css
   .dialog-container {
     z-index: 1000; /* 适当的层级值，确保不会覆盖其他组件 */
   }
   

typescript
   import { Overlay } from '@angular/cdk/overlay';
   constructor(private overlay: Overlay) {}
   openDialog() {
     const overlayRef = this.overlay.create();
     // 配置和显示对话框
   }