从一个组件通信到另一个Angular 5

Question

我有两个组件：导航组件和详细信息组件。 在我的导航组件中，我有几个选项或用户可以选择的项目。 当用户选择一个时，我正在尝试更新详细的砌体网格。 我能够更新砌体网格，但是我需要调用方法prepended（）。 例如：

详细代码组件：

  import Masonry from 'masonry-layout';

  // on ngOnInit
  let grid = document.querySelector('.grid');

  let msnry = new Masonry( grid, {
    itemSelector: '.grid-item',
  });

我需要从我的导航组件中调用以下命令：

msnry.prepended();

如何从另一个组件调用msnry.prepended（）？ 任何帮助将不胜感激。

Answer 1

如果它们具有父子关系，则可以使用模板引用变量技术从父组件中调用子组件的方法。 例如，假设以下div是导航组件模板，

<div>
    <detail-component #detailComponent></detail-component>
    <button (click)="detailComponent.sayHello()"/>
</div>

考虑到您的详细信息组件有一个名为sayHello()的方法。 单击导航组件上的按钮将调用该方法。

希望能帮助到你。