13

我想知道将功能向下传递到 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：我这里没有使用嵌入

4

1 回答 1

33

不必在子组件的控制器中提供包装函数。通过使用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

于 2016-01-25T10:43:08.370 回答