javascript - Angular 1.5 中的组件通信

Question

Angular 1.5 组件通信建议通常具有输出绑定(bind)以调用根 Controller 上的方法。

假设我有一个根组件和两个子组件。

<root>
    <child-1></child-1>
    <child-2></child-2>
</root>

它想通过读取组件二上的值然后在根中执行某些操作来对组件一上的按钮单击使用react。

例如，child-1 是一个指令，它包装了一个将绘图附加到其 DOM 节点的绘图库，并有一个变量来控制该绘图。

child-2 有一个按钮。当它被点击时，来自 child-1 变量的数据应该被传递给 root 来处理它。

具体来说，child-1 包装了 var graph2d = new vis.Graph2d(container, dataset, options);。稍后，我想从 graph2d 中检索一些信息并将其传递给 root 以对其进行处理。

这归结为:组件如何对其他组件发出的事件使用react？输入和输出建议似乎并未涵盖该场景。

Answer 1

在 Angular 1.5 中，您可以使用require 和/或属性绑定(bind)(输入/输出)进行通信。

如果您使用 require 属性，那么您的根组件将发布一个 api，您的子组件将获得对 Controller 的引用:

angular.module('app').component('child1', {
   bindings: {},
   require: {api: '^root'}, //your <root> component
   template: '',
   controller: controller
});

然后您可以在您的子组件中使用根组件的方法:

$ctrl.api.addWatchedBook();

这是根组件 Controller 函数:

$ctrl.addWatchedBook = addWatchedBook;

function addWatchedBook(bookName){

  booksWatched.push(bookName);

}

这是一个完整的架构概述:Component Communications