angular - 如何在 Angular 的子组件实例中实现单独的功能？

Question

我正在开发一个基于 PrimeNG UI 库的 Angular 应用程序。它实现了多个包含表格的页面，例如 UsersComponent、AccountsComponent、TweetsComponent 等。

我正在使用PrimeNG's Table component以表格形式显示数据。为了实现组件的可重用性，我创建了一个通用的 TableComponent 类来实现 PrimeNG 表，并向该表组件添加了自定义功能，如过滤器、排序等。

我可以将数据从 UsersComponent、AccountsComponent 和 TweetsComponent 传递到此 TableComponent 以及来自这些组件的数据父组件按照我想要的方式很好地显示。

<UsersComponent>
    <TableComponent [data]="usersArray"></TableComponent>
</UsersComponent>

<AccountsComponent>
    <TableComponent [data]="accountsArray"></TableComponent>
</AccountsComponent>

<TweetsComponent>
    <TableComponent [data]="tweetsArray"></TableComponent>
</TweetsComponent>

但是，问题是我想添加一些特定于每个组件的方法。例如，当 TableComponent 显示用户列表时，我希望能够调用方法 addUser()、deleteUser() 和 updateUser() 分别添加、删除或更新用户记录。同样，AccountsComponent 应该有自己的功能和单独、独立的 API 调用。

如何在 Angular 中实现这一目标？

我可以将数据从父组件传递到子组件，但如何将多个特定方法传递给子组件？我将在哪里创建这些方法以及如何在子组件中调用它们？

Answer 1

从我的 Angular 来看，这听起来像是您应该实现一些抽象接口(interface)(或者多个，如果您想拆分逻辑)，这些接口(interface)将由服务实现，然后作为输入属性传递给子组件。

export interface CrudService<T> {
  addItem(item: T): Observable<T>;
  updateItem(item: T): Observable<T>;
  removeItem(item: T): Observable<void>;
}

现在您可以实现特定于您的用例的服务，如下所示:

@Injectable()
export class UserService implements CrudService<User> {
  addItem(item: User): Observable<User> {
    // logic specific to user
  }
  updateItem(item: User): Observable<User> {
    // logic specific to user
  }
  removeItem(item: User): Observable<void> {
    // logic specific to user
  }

}

并将其传递给您的TableComponent

export class Tableomponent<T>  {
  @Input()
  crudService: CrudService<T>;

}

现在您可以通用地调用此服务的添加、更新或删除方法。如果不是所有实体都支持所有 CRUD 操作，您应该将此接口(interface)拆分为不同的接口(interface)。