Question

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

这是一个用例：

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

在AngularJS 1.5中传递函数的最佳方法是什么？

1 个答案: