角度1.5的组件通信

Angular 1.5 component communication suggestions usually have output bindings to invoke methods on root controllers.

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

Let's say I have a root component, and two child components.

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

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

It'd like to react to a button click on component one by reading a value on component two and then doing something in the root.

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

For example, child-1 is a directive which wraps a drawing library that attaches a drawing to its DOM node and has a variable to control that drawing.

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

child-2 has a button. When it is clicked, data from the child-1 variable should be passed on to root which does something with it.

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

Specifically, child-1 wraps var graph2d = new vis.Graph2d(container, dataset, options);. Later on, I would like to retrieve some information from graph2d and pass it on to root to do something with it.

具体来说,child-1包含var graph2d = new vis.Graph2d(container,dataset,options);.稍后,我想从graph2d中检索一些信息并将其传递给root用户来做一些事情。

This boils down to: how can components react to events issued by other components? The inputs and outputs suggestions don't seem to cover that scenario.

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

1 个解决方案

#1

In angular 1.5 you can use require and/or property bindings (input/output) to communicate.

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

If you use the require property then your root component would publish an api and your child component would get a reference to the controller:

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

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

You can then use the methods of the root component in your child component:

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

$ctrl.api.addWatchedBook();

This is the root component controller function:

这是根组件控制器功能:

$ctrl.addWatchedBook = addWatchedBook;

function addWatchedBook(bookName){

  booksWatched.push(bookName);

}

Here is a complete architectual overview: Component Communications

以下是完整的架构概述:组件通信

#1