如何使用单击事件从父组件中的子组件刷新表内容？

Question

我在子组件中创建了一个表，并在其中存储了一个刷新函数。现在，我想在我的父组件中调用它，并单击按钮执行它。你能告诉我我怎么认识到这一点吗？

我的守则：

// 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。

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

@ViewChild(ChildComponent) childComponent: ChildComponent;

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

Answer 2

您可能会以viewchild的形式获得子组件，只需直接调用组件上的方法。

  @ViewChild(ChildComponent) childComponent: ChildComponent;

  onClick() {
      childComponent.Refresh()
  }

不过，我通常更喜欢使用这种服务。

Answer 3

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

1. 共享服务您可以为父组件和子组件之间的通信添加共享服务。它也将允许双向通信。您可以找到详细的信息关于角点。
2. 父类中的@ViewChild添加以下内容：

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

您将通过使用ViewChild装饰器访问您的子属性和方法。然后向按钮中添加一个单击处理程序，并在您的子程序中调用refresh方法。

您可以找到关于角点的详细描述。

1. 状态管理

您可以将商店添加到应用程序中，并侦听商店中的事件。这是更好的方式，但它是一个好的方法，一个中型到大型的应用程序。