在AngularJS 1.5中传递内部组件之间的函数的最佳方法是什么？ [英] What is the best way to pass functions between inner components in AngularJS 1.5?

问题描述

我想知道将功能传递到2个或更多级别组件的最佳方法是什么？使用'&'绑定时，没有简单的方法可以跳过功能包装？

I was wondering what is the best way to pass functions down through 2 or more levels of components? There's no simple way of skipping the function wrap when using '&' bindings?

这是一个用例：

angular.module('app', []).component('app', {
  controller: class AppController {
    doSomething (data) {}
  },
  template: `
    <sub-component on-do-something="$ctrl.doSomething(data)">
    </sub-component>
  `
})

ps：我正在使用ngRedux，所以这种情况很常见

ps: I'm using ngRedux, so such scenario is very common

编辑：

问题是：为了使上面的代码工作，每个内部组件控制器将如下所示：

The problem is: for the code above to work, each inner component controller would look like this:

.component('subComponent', {
    bindings: {
        doSomething: '&'
    },
    controller: function SubComponentController () {
        this._doSomething = param => this.doSomething({data: param});
    },
    template: `
        <inner-component do-something="$ctrl._doSomething(data)">
        </inner-component>
    `
});

.component('innerComponent', {
    bindings: {
        doSomething: '&'
    },
    controller: function InnerComponentController () {
        this._doSomething = param => this.doSomething({data: param});
    },
    template: `
        <sub-inner-component do-something="$ctrl._doSomething(data)">
        </sub-inner-component>
    `
});

然后我必须传递 _doSomething 直接代替 doSomething 。

And then I'd have to pass down _doSomething instead of doSomething directly.

ps：我这里没有使用翻译

ps: I'm not using transclusion here

推荐答案

它没有必要在子组件的控制器中提供包装器功能。通过使用绑定，一个函数会自动附加到控制器上，您可以直接从模板中调用该函数。

It is not necessary to provide a wrapper function in the controller of your sub-components. By using bindings a function is automatically attached to the controller, which you can call directly from your template.

唯一的问题就是这个函数需要一个对象，它包含了外部模板中表达式可用的局部变量。

The only wrinkle is that this function takes an object, which contains the locals that will be made available to the expression in the outer template.

在这种情况下 data 在调用 doSomething（locals）方法时，需要明确提供外部模板中的变量。

In this case the data variable in the outer template needs to be provided explicitly when call the the doSomething(locals) method.

angular.module('app', [])

.component('app', {
  controller: class AppController {
    doSomething (data) {
      console.log(data);
    }
  },
  template: `
    <sub-component do-something="$ctrl.doSomething(data)">
    </sub-component>
  `
})

.component('subComponent', {
    bindings: {
        doSomething: '&'
    },
    template: `
        <inner-component do-something="$ctrl.doSomething({data: data})">
        </inner-component>
    `
})

.component('innerComponent', {
    bindings: {
        doSomething: '&'
    },
    template: `
        <sub-inner-component do-something="$ctrl.doSomething({data: data})">
        </sub-inner-component>
    `
})

.component('subInnerComponent', {
  bindings: {
    doSomething: '&'
  },
  template: `
      <button ng-click="$ctrl.doSomething({data: 123})">Do Something</button>
  `
});

这是一个有效的Plunker： http://plnkr.co/edit/QQF9jDGf6yiewCRs1EDu?p=preview

Here is a working Plunker : http://plnkr.co/edit/QQF9jDGf6yiewCRs1EDu?p=preview

这篇关于在AngularJS 1.5中传递内部组件之间的函数的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！