Angular中实现子组件点击按钮自行销毁的技术咨询

嘿，看你有React开发经验，刚接触Angular遇到子组件自删除的困惑对吧？其实Angular的思路和React有共通点，但也有自己的一套逻辑，咱们一步步来搞定它。

首先得明确：你现在用*ngFor绑定currentUsers数组来生成子组件，这种声明式的组件创建方式下，组件的创建和销毁是由Angular的变更检测自动管理的——数组里加元素，就自动生成子组件；数组里删元素，对应的子组件就会被销毁，同时触发子组件的ngOnDestroy钩子。

所以核心不是让子组件“自己销毁自己”，而是让子组件通知父组件移除对应的数组元素，剩下的交给Angular来处理。具体步骤如下：

1. 子组件添加输出事件 #

在子组件里用@Output定义一个事件，用来向父组件发送“删除请求”：

// was-greeted.component.ts
import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-was-greeted',
  templateUrl: './was-greeted.component.html',
  styleUrls: ['./was-greeted.component.scss']
})
export class WasGreetedComponent implements OnInit, OnDestroy {
  @Input() user: string;
  // 定义删除事件
  @Output() delete = new EventEmitter<void>();

  constructor() { }

  deleteMe() {
    // 触发删除事件，通知父组件
    this.delete.emit();
  }

  ngOnInit() { }

  // 组件销毁前的钩子，用来做清理工作
  ngOnDestroy() {
    console.log(`问候组件（用户：${this.user}）即将被销毁，可以在这里做清理，比如取消订阅、清除定时器`);
  }
}

2. 父组件监听事件并删除数组元素 #

在父组件的模板里，给子组件绑定刚才定义的delete事件，同时在*ngFor里拿到当前元素的索引（或者直接拿到元素本身）：

<!-- greeter-service.component.html -->
<div class="column" *ngFor="let user of currentUsers; let i = index">
  <app-was-greeted [user]="user" (delete)="removeUser(i)"></app-was-greeted>
</div>

然后在父组件里实现removeUser方法，从数组中移除对应的元素：

// greeter-service.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
 selector: 'app-greeter-service',
 templateUrl: './greeter-service.component.html'
})
export class GreeterServiceComponent implements OnInit {
 title = '';
 currentUser = '';
 isVisible = false;
 currentUsers: string[] = []; // 建议把any[]改成string[]，类型更严谨
 @ViewChild('newUser') inputField;

 constructor() {}

 greetingFunc(newUser : string) {
  if(newUser) {
   this.currentUsers.push(newUser);
   console.log(this.currentUsers);
   this.inputField.nativeElement.value='';
  }
 }

 // 移除用户的方法（通过索引）
 removeUser(index: number) {
  // splice修改原数组，Angular能检测到变化，自动销毁对应的子组件
  this.currentUsers.splice(index, 1);
 }

 // 如果你担心数组有重复元素，也可以用filter方法（返回新数组）：
 // removeUser(userToRemove: string) {
 //   this.currentUsers = this.currentUsers.filter(user => user !== userToRemove);
 // }

 ngOnInit() {
  this.title = 'Welcome to the Greeter!';
 }
}

关于ngOnDestroy的正确用法 #

你提到的ngOnDestroy钩子，是Angular在组件即将被销毁时自动触发的，它的作用是让你做清理工作（比如取消Observable订阅、清除setInterval定时器等），而不是让你手动销毁组件本身。

对比React的思路：React里你可能会用状态控制组件的显示或直接操作DOM，但Angular更推崇数据驱动视图——只要维护好currentUsers这个数据源，视图的更新（组件的创建/销毁）就由框架自动完成，不需要你手动操作DOM或组件实例。

这样修改后，点击子组件的删除按钮，就会通知父组件移除对应的用户，*ngFor会自动销毁该子组件，同时触发ngOnDestroy钩子完成清理。

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