在父组件中单击按钮时从子组件执行功能：Angular2

Posted 2023-02-23

【中文标题】在父组件中单击按钮时从子组件执行功能：Angular2

【英文标题】：Execute function from child component on button click in parent component: Angular2

【发布时间】：2017-07-15 09:31:25

【问题描述】：

我在子组件中有以下函数：

reload() 
    clearInterval(this.points);
    this.initiateInterval();
    this.redrawImages();

它正在重绘window.resize 事件中的一些图像。

但是在父组件中，我有一个按钮menu-burger 可以缩小窗口。我想将子组件中的reload()函数绑定到这个按钮。

这是我来自父组件的按钮：

<button class="collapseMenuIcon" (click)="toggleMenu()">

我在 Stack 上寻找有关它的其他问题，但就我而言 - 这个 reload 函数在这个子组件中使用了很多东西。

其他问题的解决方案也很少被弃用，因为 Angular2 经常变化。

提前谢谢你，我会赞成所有的答案。

【参考方案1】：

组件之间有多种通信方式。我个人为此目的使用了一项服务，它对我很有用。

在这里阅读：https://angular.io/docs/ts/latest/cookbook/component-communication.html

最后一个示例（服务示例）是我使用的示例，实现起来非常简单。

编辑：

使用服务可以让您拥有独立的组件，从而能够在应用程序的其他部分使用它们。您也可以发送/接收数据，通信是双方的。我强烈推荐这种方法。

【参考方案2】：

共享服务是一个很好的选择。只是为了在那里抛出另一个选项，根据您的用例，如果您愿意，您可以在没有服务的情况下在父子之间使用主题。

在孩子中声明主题：

import  Subject  from 'rxjs/Subject';

public static fireEvent: Subject<boolean> = new Subject();

并在您的构造函数中订阅：

constructor(....) 
    MyChildComponent.fireEvent.subscribe(res => 
        this.reload();
    );

在你的父母中：

import  MyChildComponent  from './my-path';

然后单击按钮，告诉孩子触发reload-method：

toggleMenu() 
  MyChildComponent.fireEvent.next(true);