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

Question

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

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

它在window.resize事件上重绘了一些图片。

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

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

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

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

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

提前谢谢你，我会提出所有答案。

Answer 1

共享服务是一个非常好的选择。只是为了抛出另一个选项，根据你的使用情况，如果你愿意，你可以在没有服务的父母和孩子之间使用主题。

在儿童中声明主题：

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 - 方法：

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

Answer 2

有几种方法可以在组件之间进行通信。我个人为此目的使用服务，它对我很有用。

请在此处阅读：https://angular.io/docs/ts/latest/cookbook/component-communication.html

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

编辑：

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