Angular中Material UI Dialog组件失效，Material类未被识别

以下是针对你遇到的mat-button、mat-dialog-close等Material类无法识别问题的排查和解决步骤：

1. 导入必要的Material模块 #

在对应模块文件（如NormaAdscripcionModule或AppModule）中，必须显式导入Material组件模块，否则Angular无法识别相关指令：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { FlexLayoutModule } from '@angular/flex-layout';

import { NormaAdscripcionComponent } from './norma-adscripcion.component';
import { NormaAdscripcionDialogComponent } from './norma-adscripcion-dialog.component';

@NgModule({
  declarations: [
    NormaAdscripcionComponent,
    NormaAdscripcionDialogComponent // 确保对话框组件已声明
  ],
  imports: [
    CommonModule,
    MatDialogModule,
    MatButtonModule,
    FlexLayoutModule
  ]
})
export class NormaAdscripcionModule { }

2. 确认Material主题样式已导入 #

全局样式文件（如styles.scss/styles.css）中必须导入Material主题，否则组件样式不会生效：

• 若使用SCSS，在styles.scss中添加：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

• 若使用CSS，在angular.json的styles数组中配置：

"styles": [
  "@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css"
]

3. 清理按钮冗余指令 #

你的按钮代码同时使用mat-raised-button和mat-button，属于冗余配置，保留一个即可：

<button mat-raised-button color="primary" (click)="openDialog()">EXIT</button>

4. 对话框模板正确使用Material指令 #

确保对话框模板（norma-adscripcion-dialog.component.html）中的指令格式正确，示例如下：

<h2 mat-dialog-title>对话框标题</h2>
<div mat-dialog-content>
  这是对话框内容区域
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close>取消</button>
  <button mat-raised-button color="primary" mat-dialog-close>确认</button>
</div>

内容的提问来源于stack exchange，提问作者Mr Usher