在AngularJS 1.5中传递内部组件之间的函数的最佳方法是什么？

Question

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

这是一个用例:

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

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

编辑:

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

.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直接传递.

ps:我不是在这里使用翻译

Answer 1

没有必要在子组件的控制器中提供包装器功能.通过使用bindings功能自动附加到控制器,您可以直接从模板调用.

唯一的缺点是此函数接受一个对象,该对象包含将在外部模板中对表达式可用的局部变量.

在这种情况下,data需要在调用doSomething(locals)方法时显式提供外部模板中的变量.

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