Angular中如何为子组件实例实现独立专属功能？

一、方法的创建位置 #

每个业务组件（UsersComponent、AccountsComponent、TweetsComponent）各自维护专属的业务方法，比如：

• UsersComponent中定义addUser()、deleteUser()、updateUser()
• AccountsComponent中定义addAccount()、deleteAccount()、updateAccount()

这类业务方法属于对应模块的专属逻辑，放在父组件中能保证职责单一，后续维护也更清晰。

二、向子组件传递并调用方法的两种方案 #

方案1：通过@Output事件触发（推荐，更符合Angular组件解耦设计）

子组件（TableComponent）只负责触发事件，具体业务逻辑交给父组件处理：

1. 在TableComponent中定义事件发射器

// table.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html'
})
export class TableComponent {
  @Input() data: any[] = [];
  
  // 定义增删改对应的事件
  @Output() onAdd = new EventEmitter<void>();
  @Output() onDelete = new EventEmitter<any>(); // 携带要删除的条目数据
  @Output() onUpdate = new EventEmitter<any>(); // 携带要更新的条目数据
}

2. TableComponent模板中绑定触发事件

<!-- table.component.html -->
<p-table [value]="data">
  <ng-template pTemplate="header">
    <tr>
      <!-- 表头列定义 -->
      <th>操作</th>
    </tr>
    <tr>
      <td>
        <button pButton type="button" label="新增" (click)="onAdd.emit()"></button>
      </td>
    </tr>
  </ng-template>
  
  <ng-template pTemplate="body" let-item>
    <tr>
      <!-- 表格内容列定义 -->
      <td>
        <button pButton type="button" label="编辑" (click)="onUpdate.emit(item)"></button>
        <button pButton type="button" label="删除" (click)="onDelete.emit(item)"></button>
      </td>
    </tr>
  </ng-template>
</p-table>

3. 父组件绑定事件并处理业务逻辑
   以UsersComponent为例：

// users.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html'
})
export class UsersComponent {
  usersArray: any[] = []; // 假设已通过API获取数据

  addUser() {
    // 调用用户新增API，更新usersArray
  }

  deleteUser(user: any) {
    // 调用用户删除API，更新usersArray
  }

  updateUser(user: any) {
    // 调用用户更新API，更新usersArray
  }
}

<!-- users.component.html -->
<app-table 
  [data]="usersArray"
  (onAdd)="addUser()"
  (onDelete)="deleteUser($event)"
  (onUpdate)="updateUser($event)"
></app-table>

AccountsComponent、TweetsComponent只需复用上述逻辑，替换成自己的业务方法即可。

方案2：通过@Input传递方法对象

将父组件的业务方法封装成对象，通过@Input传递给子组件：

1. TableComponent定义方法对象输入

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

// 定义方法对象的类型
interface TableActionHandlers {
  add: () => void;
  delete: (item: any) => void;
  update: (item: any) => void;
}

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html'
})
export class TableComponent {
  @Input() data: any[] = [];
  @Input() actionHandlers?: TableActionHandlers;
}

2. TableComponent模板中调用方法

<!-- table.component.html -->
<button pButton type="button" label="新增" (click)="actionHandlers?.add()"></button>
<button pButton type="button" label="删除" (click)="actionHandlers?.delete(item)"></button>

3. 父组件传递方法对象

<!-- users.component.html -->
<app-table 
  [data]="usersArray"
  [actionHandlers]="{
    add: addUser,
    delete: deleteUser,
    update: updateUser
  }"
></app-table>

三、方案对比 #

• 优先选方案1：子组件无需知晓父组件的具体方法，仅负责触发事件，组件解耦性更强，符合Angular的组件设计理念。
• 方案2适合简单场景，但子组件依赖父组件的方法定义，耦合度较高。

内容的提问来源于stack exchange，提问作者Uzair A.