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>
  `
});

これが動作中のプランカーです: http://plnkr.co/edit/QQF9jDGf6yiewCRs1EDu?p=preview

于 2016-01-25T10:43:08.370 に答える