时间戳

首页 > 解决方案 > 两个组件Angular之间的相互关系？

angular - 两个组件Angular之间的相互关系？

问题描述

有两个具有以下结构的组件：

<app-root>
    <app-book-list>
    <app-pagination (onSelect)="setPageSize($event)">
<app-root>

从服务器加载书籍的方法放置在<app-book-list>：

public getBooks(page: number): void {}

当用户从分页中选择页面时，它会调用 event (onSelect)="setPageSize($event)"。

处理setPageSize()程序在<app-root>组件中。

 public setPageSize(badge: Badge): void {
     // Call here getBooks
 }

如何调用getBooks()里面的方法public setPageSize(badge: Badge) {}？

当然，我可以将组件移动<app-pagination (onSelect)="setPageSize($event)">到<app-book-list>中，但我想在其他任何地方使用列表，所以我将分页与列表组件分开。

标签： angular

解决方案

有两种方法可以解决这个问题：

  1. 使用可观察对象构建一个服务，该服务将处理值和一些功能
  2. 使用@Input() 和@Output() 在父母和孩子之间进行交流

无论如何，您需要考虑您的用例。为了获得更大的可重用性，我会亲自使用专门的服务。

推荐阅读