Angular集成模态对话框后按钮及页脚消失问题求助

我用Angular开发基础Web应用，目标是实现一个3列布局的Scrum看板。原本计划在第一列添加一个点击即可打开模态对话框的按钮，但完成模态框集成后，按钮直接不可见，甚至页面页脚也消失了。以下是相关代码文件：

body.component.html #

<div class="board-container">
    <div class="column" id="offen">
        <app-task-form></app-task-form>
    </div>
    <div class="column" id="bearbeitung">
        <!-- Hier kommen Aufgaben in der Kategorie "In Bearbeitung" -->
    </div>
    <div class="column" id="abgeschlossen">
        <!-- Hier kommen Aufgaben in der Kategorie "Abgeschlossen" -->
    </div>
</div>

task-form.component.html #

<input type="text" [(ngModel)]="taskTitle" placeholder="Enter task title" />
<button mat-raised-button (click)="openModal()">Open Modal</button>

task-form.component.ts #

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

import { ModalComponent } from '../modal/modal.component';

@Component({
  selector: 'app-task-form',
  templateUrl: './task-form.component.html',
  styleUrls: ['./task-form.component.css']
})
export class TaskFormComponent {
  taskTitle: string = ''; // 用于存储任务标题的属性

  constructor(public dialog: MatDialog) {}

  openModal() {
    this.dialog.open(ModalComponent);
  }
}

modal.component.ts #

import { Component } from '@angular/core';

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

}

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BodyComponent } from './body/body.component';
import { FooterComponent } from './footer/footer.component';
import { TaskFormComponent } from './task-form/task-form.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ModalComponent } from './modal/modal.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    BodyComponent,
    FooterComponent,
    TaskFormComponent,
    ModalComponent
    ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule, // 添加FormsModule
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题原因 #

核心问题是未导入Angular Material的必要模块：

1. 使用MatDialog但未导入MatDialogModule，导致模态框服务无法正常初始化，引发组件渲染异常
2. 使用mat-raised-button但未导入MatButtonModule，Material按钮组件无法被识别渲染，直接导致按钮消失
3. 组件渲染异常会触发Angular的错误处理，进而影响到页面其他元素（比如页脚）的正常显示

解决方案 #

1. 导入Material必要模块
   修改app.module.ts，添加MatDialogModule和MatButtonModule的导入，并加入到imports数组中：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { FormsModule } from '@angular/forms';
   // 新增Material模块导入
   import { MatDialogModule } from '@angular/material/dialog';
   import { MatButtonModule } from '@angular/material/button';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { HeaderComponent } from './header/header.component';
   import { BodyComponent } from './body/body.component';
   import { FooterComponent } from './footer/footer.component';
   import { TaskFormComponent } from './task-form/task-form.component';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { ModalComponent } from './modal/modal.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       HeaderComponent,
       BodyComponent,
       FooterComponent,
       TaskFormComponent,
       ModalComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       FormsModule,
       BrowserAnimationsModule,
       // 加入导入的Material模块
       MatDialogModule,
       MatButtonModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 完善模态框模板内容
   给modal.component.html添加基础内容，避免空模板可能导致的异常：

   <h2>任务详情</h2>
   <button mat-button (click)="closeModal()">关闭</button>
   

   同时在modal.component.ts中添加关闭方法：

   import { Component } from '@angular/core';
   import { MatDialogRef } from '@angular/material/dialog';
   
   @Component({
     selector: 'app-modal',
     templateUrl: './modal.component.html',
     styleUrls: ['./modal.component.css']
   })
   export class ModalComponent {
     constructor(public dialogRef: MatDialogRef<ModalComponent>) {}
   
     closeModal() {
       this.dialogRef.close();
     }
   }
   

3. 验证依赖安装
   如果还未安装Angular Material，执行以下命令完成安装：

   ng add @angular/material
   

完成以上修改后，按钮应该能正常显示，点击后可以打开模态框，页脚也会恢复正常。

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