Angular复用模态组件时modalConfig未定义的问题解决

1. 确保组件B中正确初始化ModalConfig对象 #

错误的核心原因之一是未先实例化ModalConfig就直接赋值，比如直接执行modalConfig.modalTitle = '我的标题'，此时modalConfig还是undefined。

正确做法：在组件B的类中先声明并初始化配置对象：

// 组件B的.ts文件
import { ModalConfig } from './modal.config';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html'
})
export class ComponentBComponent {
  // 初始化ModalConfig对象，直接设置个性化初始值
  modalConfig: ModalConfig = {
    modalTitle: '自定义模态框标题',
    // 其他需要的配置属性...
  };
}

2. 模态组件通过@Input()接收配置并设置默认值 #

在ModalComponent中，必须通过@Input()接收外部传入的modalConfig，且建议设置默认值避免undefined：

// modal.component.ts
import { Component, Input } from '@angular/core';
import { ModalConfig } from './modal.config';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html'
})
export class ModalComponent {
  // 用@Input()接收配置，同时设置默认空对象（或默认配置）
  @Input() modalConfig: ModalConfig = {} as ModalConfig;
}

如果ModalConfig接口包含必填属性，可直接给默认值：

// modal.config.ts
export interface ModalConfig {
  modalTitle: string;
  // 其他必填/可选属性...
}

// ModalComponent中：
@Input() modalConfig: ModalConfig = {
  modalTitle: '默认标题'
};

3. 模板中添加空值保护（安全导航操作符） #

在modal.component.html中，使用modalConfig的属性时必须添加?.安全导航操作符，防止未初始化时触发报错：

<!-- modal.component.html -->
<div class="modal-header">
  <h5 class="modal-title">{{ modalConfig?.modalTitle }}</h5>
</div>
<!-- 其他模态框内容 -->

4. 确认组件B模板中正确传递配置 #

如果是直接在组件B的模板中使用模态组件，确保通过属性绑定传递modalConfig：

<!-- component-b.component.html -->
<app-modal [modalConfig]="modalConfig"></app-modal>

如果是通过自定义模态服务打开组件，要确保打开时传入配置参数：

// 组件B中调用模态服务
import { ModalService } from './modal.service';

constructor(private modalService: ModalService) {}

openModal() {
  this.modalService.open(ModalComponent, {
    modalTitle: '通过服务传递的个性化标题'
  });
}

5. 检查ModalConfig接口的定义 #

确保接口属性合理设置为可选（用?标记），避免因缺少属性导致初始化失败：

// modal.config.ts
export interface ModalConfig {
  modalTitle?: string; // 标记为可选属性
  modalContent?: string;
  // 其他可选属性...
}

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