如何使用点击事件刷新父组件中子组件的 table 内容？

Question

我在子组件中创建了一个table，并在其中存储了一个刷新功能。现在我想在我的父组件中调用它并通过单击按钮来执行它。你能告诉我如何实现这一点吗？

我的代码：

// Child-Component

ngOnInit() {
this.refresh();
}

  /**
   * Refresh Data Table
   */
  public refresh() {
    if (!this.isLoading) {
      this.all = false;
      this.clearRows();
      this.loadData();
    }
  }

  public clearRows() {
    const formArray = this.salesAreaForm.get('rows') as FormArray;
    formArray.clear();
  }

// Parent-Component

<button>Refresh Child-Component</button>
<app-child-component></app-child-component>

Answer 1

您可以将子组件作为 viewchild 并直接在组件上调用该方法。

  @ViewChild(ChildComponent) childComponent: ChildComponent;

  onClick() {
      childComponent.Refresh()
  }

虽然我通常更喜欢为此使用服务

Answer 2

你应该在父组件中使用ViewChild。

import { ..., ViewChild } from '@angular/core';

@ViewChild(ChildComponent) childComponent: ChildComponent;

...
childComponent.refresh();
...

Answer 3

有多种方法可以做到这一点。

共享服务 您可以为 parent 和 child 组件之间的通信添加共享服务。它还将允许双向通信。您可以找到详细信息 on the Angular site.
@ViewChild 在您的 parent class 中添加以下内容：

@ViewChild(ChildComponent) child:ChildComponent; 
onRefreshClick(){ 
    this.child.refresh() 
}

您将可以使用 ViewChild 装饰器访问您的 child 属性和方法。然后向您的按钮添加一个 on-click 处理程序，并在您的 child.

中调用 refresh 方法

您可以找到详细说明 on the Angular site。

状态管理

您可以将商店添加到您的应用程序并监听商店中的事件。这是更可取的方式，但对于 middle-to-large 个应用程序来说是个好方法。

如何使用点击事件刷新父组件中子组件的 table 内容？

How can I refresh my table content from the child component in the parent component with click event?

angular

typescript

event-binding