Angular点击按钮时如何获取指定动态组件实例的deviceId属性

实现步骤 #

1. 给StatusBoxComponent添加删除输出事件 #

首先在你的StatusBoxComponent类里定义一个输出事件，点击删除按钮时触发该事件并带出当前组件的deviceId：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  // 保留你原有组件配置
})
export class StatusBoxComponent {
  // 保留你原有其他属性
  deviceId: string;
  
  // 新增删除事件
  @Output() delete = new EventEmitter<string>();

  // 绑定到删除按钮的click事件
  onDeleteClick() {
    this.delete.emit(this.deviceId);
  }
}

记得给StatusBox模板里的红色删除按钮绑定点击事件：<button (click)="onDeleteClick()">删除</button>

2. 在动态指令中订阅组件的删除事件 #

修改DynamicStatusBoxDirective，订阅StatusBoxComponent的delete事件，拿到deviceId后处理localStorage删除，同时向外通知父组件更新配置列表：

import { Output, EventEmitter, Subscription } from '@angular/core';

@Directive({selector: '[appDynamicStatusBox]'})
export class DynamicStatusBoxDirective implements OnInit, OnDestroy {
  @Input() config: any;
  @Output() configDeleted = new EventEmitter<string>();
  componentRef!: ComponentRef<StatusBoxComponent>;
  private deleteSub?: Subscription;

  constructor(private resolver: ComponentFactoryResolver, public viewContainerRef: ViewContainerRef) {}

  ngOnInit(): void {
    const factory = this.resolver.resolveComponentFactory(StatusBoxComponent);
    this.viewContainerRef.clear();
    this.componentRef = this.viewContainerRef.createComponent(factory);
    // 原有给组件实例赋值的逻辑保持不变
    this.componentRef.instance.name = this.config.get('name')
    this.componentRef.instance.deviceId = this.config.get('device')
    this.componentRef.instance.cpuTemp = this.config.get('cpuTemp')
    this.componentRef.instance.diskUsage = this.config.get('diskSpace')
    this.componentRef.instance.systemUptime = this.config.get('uptime')
    this.componentRef.instance.systemTime = this.config.get('time')
    this.componentRef.instance.number = this.config.get('num')
    this.componentRef.instance.device = this.config.get('device')
    this.componentRef.instance.value = this.config.get('value')

    // 新增：订阅删除事件
    this.deleteSub = this.componentRef.instance.delete.subscribe(deviceId => {
      // 删除localStorage对应条目
      localStorage.removeItem(deviceId);
      // 向外通知父组件删除对应配置
      this.configDeleted.emit(deviceId);
    });
  }

  // 新增：销毁时取消订阅防止内存泄漏
  ngOnDestroy() {
    this.deleteSub?.unsubscribe();
  }
}

3. 父组件AppComponent处理配置列表更新 #

修改AppComponent的模板，绑定指令的configDeleted事件，触发时更新myConfigs数组：

<app-header></app-header>
<div class='status-box-container'>
    <ng-container 
      *ngFor="let config of myConfigs; let i=index" 
      appDynamicStatusBox 
      [config]="config"
      (configDeleted)="onConfigDeleted($event)"
    ></ng-container>
</div>

然后在AppComponent类里添加onConfigDeleted方法：

onConfigDeleted(deletedDeviceId: string) {
  // 过滤掉被删除的配置项，Angular会自动销毁对应的组件实例
  this.myConfigs = this.myConfigs.filter(config => config.get('device') !== deletedDeviceId);
}

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