Angular组件复用：如何注入不同数据？

我来帮你搞定这个组件复用的难题！核心思路是把你的DialogComponent改造成通用型组件，让它能接收不同类型的数据（客户/配送），并根据传入的类型动态调整表单和审批逻辑。下面是具体的实现步骤：

1. 定义数据类型（可选但推荐） #

先明确你的Customer和Shipping数据结构，用TypeScript接口规范起来，方便后续类型检查：

// customer.model.ts
export interface Customer {
  id: number;
  name: string;
  email: string;
  // 其他客户字段
}

// shipping.model.ts
export interface Shipping {
  id: number;
  customerId: number;
  address: string;
  status: string;
  // 其他配送字段
}

2. 改造DialogComponent为通用组件 #

方式一：使用@Input（内嵌式弹窗场景） #

如果你的DialogComponent是直接嵌入在父组件模板里的，用@Input来接收数据和类型：

// dialog.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Customer, Shipping } from './models';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html'
})
export class DialogComponent {
  // 接收要审批的数据（客户或配送）
  @Input() approvalData: Customer | Shipping;
  // 标记当前审批类型，用于区分表单渲染和逻辑
  @Input() approvalType: 'customer' | 'shipping';
  // 输出审批结果给父组件
  @Output() approved = new EventEmitter<boolean>();

  handleApproval() {
    // 根据审批类型执行不同逻辑
    if (this.approvalType === 'customer') {
      console.log('审批客户:', this.approvalData);
    } else {
      console.log('审批配送:', this.approvalData);
    }
    // 通知父组件审批完成
    this.approved.emit(true);
  }
}

对应的模板dialog.component.html，动态渲染内容：

<h2>{{ approvalType === 'customer' ? '审批客户信息' : '审批配送信息' }}</h2>
<form>
  <!-- 客户数据表单 -->
  <div *ngIf="approvalType === 'customer' && approvalData as customer">
    <label>客户名称: {{ customer.name }}</label>
    <label>客户邮箱: {{ customer.email }}</label>
    <!-- 其他客户字段 -->
  </div>

  <!-- 配送数据表单 -->
  <div *ngIf="approvalType === 'shipping' && approvalData as shipping">
    <label>配送地址: {{ shipping.address }}</label>
    <label>当前状态: {{ shipping.status }}</label>
    <!-- 其他配送字段 -->
  </div>

  <button (click)="handleApproval()">确认审批</button>
  <button (click)="approved.emit(false)">取消</button>
</form>

方式二：使用MAT_DIALOG_DATA（Angular Material弹窗场景） #

如果你的DialogComponent是用Angular Material的MatDialog打开的，通过注入MAT_DIALOG_DATA接收数据：

// dialog.component.ts
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Customer, Shipping } from './models';

interface DialogData {
  data: Customer | Shipping;
  type: 'customer' | 'shipping';
}

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html'
})
export class DialogComponent {
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: DialogData,
    public dialogRef: MatDialogRef<DialogComponent>
  ) {}

  handleApproval() {
    if (this.data.type === 'customer') {
      console.log('审批客户:', this.data.data);
    } else {
      console.log('审批配送:', this.data.data);
    }
    this.dialogRef.close(true);
  }
}

模板同样可以根据data.type动态渲染内容，逻辑和上面一致。

3. 在Customer组件中调用复用的Dialog #

情况一：内嵌式弹窗 #

在customer.component.html中添加两个按钮，分别控制不同类型的弹窗：

<!-- 审批客户按钮 -->
<button 
  *ngIf="canCustomerServiceApprove"
  (click)="openApprovalDialog(customerData, 'customer')"
>
  审批客户
</button>

<!-- 审批配送按钮 -->
<button 
  *ngIf="canShippingServiceApprove"
  (click)="openApprovalDialog(shippingData, 'shipping')"
>
  审批配送
</button>

<!-- 复用的Dialog组件 -->
<app-dialog
  *ngIf="isDialogOpen"
  [approvalData]="currentApprovalData"
  [approvalType]="currentApprovalType"
  (approved)="handleDialogClose($event)"
></app-dialog>

对应的customer.component.ts逻辑：

import { Component } from '@angular/core';
import { Customer, Shipping } from './models';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html'
})
export class CustomerComponent {
  customerData: Customer = { /* 你的客户数据 */ };
  shippingData: Shipping = { /* 你的配送数据 */ };
  isDialogOpen = false;
  currentApprovalData: Customer | Shipping;
  currentApprovalType: 'customer' | 'shipping';
  canCustomerServiceApprove = true; // 你的权限判断逻辑
  canShippingServiceApprove = true;

  openApprovalDialog(data: Customer | Shipping, type: 'customer' | 'shipping') {
    this.currentApprovalData = data;
    this.currentApprovalType = type;
    this.isDialogOpen = true;
  }

  handleDialogClose(approved: boolean) {
    this.isDialogOpen = false;
    if (approved) {
      // 审批成功后的逻辑，比如更新状态
    }
  }
}

情况二：Angular Material弹窗 #

如果用MatDialog，customer.component.ts的调用逻辑如下：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
import { Customer, Shipping } from './models';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html'
})
export class CustomerComponent {
  customerData: Customer = { /* 你的客户数据 */ };
  shippingData: Shipping = { /* 你的配送数据 */ };
  canCustomerServiceApprove = true;
  canShippingServiceApprove = true;

  constructor(private dialog: MatDialog) {}

  openCustomerApproval() {
    const dialogRef = this.dialog.open(DialogComponent, {
      data: {
        data: this.customerData,
        type: 'customer' as const
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        // 客户审批成功后的逻辑
      }
    });
  }

  openShippingApproval() {
    const dialogRef = this.dialog.open(DialogComponent, {
      data: {
        data: this.shippingData,
        type: 'shipping' as const
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        // 配送审批成功后的逻辑
      }
    });
  }
}

对应的customer.component.html按钮：

<button 
  *ngIf="canCustomerServiceApprove"
  (click)="openCustomerApproval()"
>
  审批客户
</button>

<button 
  *ngIf="canShippingServiceApprove"
  (click)="openShippingApproval()"
>
  审批配送
</button>

这样你的DialogComponent就可以完美复用，既处理客户数据审批，又处理配送数据审批啦！

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