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

【问题标题】：Execute function from child component on button click in parent component: Angular2在父组件中单击按钮时从子组件执行功能：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 经常变化。

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

【问题讨论】：

标签： javascript angular events typescript components

【解决方案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);
}

【讨论】：