web-dev-qa-db-ja.com

AngularJS 1.5の内部コンポーネント間で関数を渡すための最良の方法は何ですか？

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：ここではトランスクルージョンを使用していません

javascriptangularjsangularjs-compileangularjs-components
10
Hodes

サブコンポーネントのコントローラーにラッパー関数を提供する必要はありません。 bindingsを使用することにより、関数がコントローラーに自動的にアタッチされ、テンプレートから直接呼び出すことができます。

唯一の問題は、この関数がオブジェクトを取ることです。このオブジェクトには、外部テンプレートの式で使用できるようになるローカルが含まれています。

この場合、doSomething(locals)メソッドを呼び出すときに、外部テンプレートのdata変数を明示的に指定する必要があります。

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

29
Pete BD