javascript - 单击父组件中的按钮时从子组件执行函数 : Angular2

Question

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

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

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

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

这是我的父组件按钮:

<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();
    });
}

在你的 parent 中:

import { MyChildComponent } from './my-path';

然后点击按钮，告诉 child 触发重新加载-方法:

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