Question

Angular 1.5组件通信建议通常具有输出绑定以调用根控制器上的方法。

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

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

它希望通过读取组件2上的值然后在根目录中执行某些操作来对组件1上的按钮单击做出反应。

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

child-2有一个按钮。单击它时，child-1变量中的数据应传递给root，后者会对其执行某些操作。

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

这归结为：组件如何对其他组件发出的事件做出反应？输入和输出建议似乎不包括这种情况。

Answer 1

在角度1.5中，您可以使用需要和/或属性绑定（输入/输出）进行通信。

如果您使用require属性，那么您的根组件将发布api，您的子组件将获得对控制器的引用：

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

然后，您可以使用子组件中根组件的方法：

$ctrl.api.addWatchedBook();

这是根组件控制器功能：

$ctrl.addWatchedBook = addWatchedBook;

function addWatchedBook(bookName){

  booksWatched.push(bookName);

}

以下是完整的架构概述：Component Communications

角度1.5的组件通信

1 个答案: