时间戳

首页 > 解决方案 > 在Angular中为具有未知参数的孩子传递函数

angular - 在Angular中为具有未知参数的孩子传递函数

问题描述

我有 2 个带有分页和搜索的组件（品牌、产品）。所以，我想创建重用分页器。这个分页器组件接收

@Input() currentPage: number;
@Input() totalPage: number;

现在，我有（3：当前，6：总计）

1, 2, [3], 4, 5, 6

更改页面时，它会从父组件调用函数，例如

this.getAllProduct(currentPage, totalPage);

但是当我使用分页搜索时，品牌（产品）组件中的功能搜索看起来像

searchBrand(name);

或者

searchProduct(name, sku, brand, category, price, ....);

如何为子组件（分页器）传递此函数，当我单击页面时，它会调用这些函数

标签： angular

解决方案

Angular 有这个文档页面，其中包含有关如何使组件交互的示例和说明。仔细阅读它，它将为您提供所需的所有工具：组件交互。

要回答这个具体问题：

  • 如果操作源自父级，并且您想调用子级中存在的方法，请使用@Input或ViewChild：

    • 您可以通过@Input实现该ngOnChanges方法来监听孩子的变化。
    • 您可以直接从@ViewChild父级调用子级的方法。这是用于更高级的用途，因此我怀疑您是否希望在这种情况下使用它。

  • 如果操作源自子级，并且您想要调用父级中存在的方法，则使用@Output.

对于更高级的用例，您可以使用服务来双向通信父子节点。

推荐阅读