Angular对话框内按钮无Material样式问题求助

问题描述 #

Angular项目其他功能正常，但独立对话框组件内的按钮无法显示Material设计样式，相关代码文件如下：

app.component.ts #

import { Component } from '@angular/core';
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faLinkedinIn, faLinkedin, faGithub} from '@fortawesome/free-brands-svg-icons';
import { MaterialExampleModule } from '../material.module';
import {DialogOverviewExample, DialogOverviewExampleDialog} from 'src/tutorial/tutorial.component'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(public tut: DialogOverviewExample){}

  title = 'file';
  faLinked = faLinkedin;
  faGithub = faGithub;

  showDialog(){
    this.tut.openDialog();
  }
}

app.module.ts #

import { ApplicationInitStatus, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MaterialExampleModule } from '../material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material/core';
import {HttpClientModule} from '@angular/common/http';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { DialogOverviewExample } from '../tutorial/tutorial.component';
import { MatButtonModule } from '@angular/material/button'


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatNativeDateModule,
    MaterialExampleModule,
    FontAwesomeModule,
    MatButtonModule,
  ],
  exports:[
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
  
}

tutorial.component.ts #

import {Component, Inject, Injectable, OnInit} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { MaterialExampleModule } from '../material.module';
import { MatButtonModule } from '@angular/material/button'


export interface DialogData {
  animal: string;
  name: string;
}

@Injectable({
  providedIn: "root"
})

@Component({
  selector: 'app-tutorial',
  templateUrl: './tutorial.component.html',
  styleUrls: ['./tutorial.component.css']
})
export class DialogOverviewExample {
  animal: string | undefined;
  name: string | undefined;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: 'auto',
      height: 'auto',
      data: {name: this.name, animal: this.animal},
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }
}

@Component({
  selector: 'tutorial.component',
  templateUrl: 'tutorial.component.html',
})
export class DialogOverviewExampleDialog {
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData,public dialog: MatDialog
  ) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

tutorial.component.html #

<button mat-button mat-dialog-close>Close</button>
<a mat-raised-button routerLink=".">test</a>

问题核心分析 #

1. 组件未注册：DialogOverviewExample 和 DialogOverviewExampleDialog 未在AppModule的declarations中声明，Angular无法识别这些组件，导致样式依赖无法加载。
2. 装饰器错误：DialogOverviewExample 同时使用@Injectable和@Component装饰器，组件不需要标记为服务，这会导致实例化异常。
3. 模板与Selector问题：DialogOverviewExampleDialog 使用了非法的selector（包含.），且与父组件共用同一个模板文件，引发解析冲突。
4. Material依赖覆盖：虽然导入了MatButtonModule，但未确保对话框组件能正确访问到这些模块的样式。

分步解决方案 #

1. 注册组件到AppModule #

修改app.module.ts，将两个对话框相关组件添加到declarations数组：

@NgModule({
  declarations: [
    AppComponent,
    DialogOverviewExample, // 新增
    DialogOverviewExampleDialog // 新增
  ],
  // ...其余代码保持不变
})

2. 修正组件装饰器与模板 #

• 移除DialogOverviewExample上的@Injectable装饰器，组件通过模块声明即可被使用：

// 删除以下代码块
// @Injectable({
//   providedIn: "root"
// })

• 修正DialogOverviewExampleDialog的selector和模板路径，使用专属模板文件：

@Component({
  selector: 'app-tutorial-dialog', // 改为合法的选择器
  templateUrl: './tutorial-dialog.component.html', // 使用单独模板
})
export class DialogOverviewExampleDialog {
  // ...组件逻辑不变
}

3. 创建对话框专属模板 #

新建tutorial-dialog.component.html文件，将按钮代码移入：

<button mat-button mat-dialog-close>Close</button>
<a mat-raised-button routerLink=".">test</a>

4. 确保Material模块完整性 #

检查material.module.ts，确保已导入并导出所需的Material模块：

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [MatButtonModule, MatDialogModule],
  exports: [MatButtonModule, MatDialogModule]
})
export class MaterialExampleModule {}

5. 优化组件注入方式（可选） #

不建议直接将组件注入到另一个组件的构造函数中，可改为在AppComponent中直接注入MatDialog并打开对话框：

// app.component.ts
constructor(public dialog: MatDialog){}

showDialog(){
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    width: 'auto',
    height: 'auto',
    data: {name: this.name, animal: this.animal},
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}

完成以上步骤后，重启项目，对话框内的按钮即可正常显示Material样式。

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