Angular中如何判断组件是作为模态框调用还是普通页面组件调用？

你遇到的报错原因是：当组件未作为模态框调用时，Angular依赖注入容器中不存在MAT_DIALOG_DATA令牌对应的实例，直接注入就会抛出找不到注入项的错误。可以通过两种方案解决：

方案1：给MAT_DIALOG_DATA加可选注入装饰器 #

通过@Optional()装饰器标记注入项为可选，非模态场景下会注入null，不会触发报错：

import { Component, Inject, Optional } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

export class MyComponent {
  isModal = false;

  constructor(@Optional() @Inject(MAT_DIALOG_DATA) data: any) {
    // 模态框场景下才会拿到传入的data，非模态场景data为null
    this.isModal = !!data?.isModalComponent;
  }
}

方案2：通过MatDialogRef判断（更稳妥） #

只有通过MatDialog打开的组件才会注入MatDialogRef实例，不需要依赖传入的自定义参数，兼容性更强：

import { Component, Optional } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

export class MyComponent {
  isModal = false;

  constructor(@Optional() private dialogRef: MatDialogRef<MyComponent>) {
    // 存在dialogRef实例即为模态框调用场景
    this.isModal = !!dialogRef;
  }
}

拿到isModal标识后，就可以在组件内灵活控制样式、逻辑：

<!-- 模板中动态绑定样式 -->
<div [ngClass]="{'modal-container': isModal, 'normal-container': !isModal}">
  组件内容
</div>

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