AngularJS如何将组件的双向绑定转换为单向绑定

Question

您好，将angularJS中的两种数据绑定转换为一种方法的正确方法是什么？

我有组件

import template from './test.component.html';
import controller from './test.controller';

export const DateWrapperComponent = {
  bindings: {
    test: '='
  },
  template,
  controller
};

控制器

export default function TestController($scope) {
  /* ngInject */

  $scope.$watch('$ctrl.test', () => {
     console.log(this);
  });
}

并查看：

<input type="text" ng-model="$ctrl.test">

什么是正确的转换方式？

Answer 1

似乎您想将test值从使用者组件传递到您的组件，但是当该值被您的组件更改时，不应将其反映回使用者组件的值。因此，您可以在<选项中使用=（单向绑定）而不是bindings（双向绑定）。在绑定<内部，请确保数据将以单向方式（从上到下）流动。

export const DateWrapperComponent = {
  bindings: {
    test: '<'
  },
  template,
  controller
};

  

注意：当1.5.x时，此功能从component版本开始适用   AngularJS中引入了API

Answer 2

使向Angular 2+的迁移更加容易

将与=的AngularJS双向绑定转换为对输入使用<的单向绑定，对输出使用与&的表达式绑定：

app.component("testComponent", {
    bindings: {
        sample: '<',
        sampleChange: '&',
    },
    template: `
        <fieldset>
            <input ng-model="$ctrl.sample"
                   ng-change="$ctrl.sampleChange({$event: $ctrl.sample})"
            />
        </fieldset>
    `,
});

用法：

<test-component sample="test" sample-change="test=$event">
</test-component>

TEST={{test}}

之所以这样做，是因为它使向Angular 2+的迁移更加容易。 Angular 2+与=没有双向绑定。

有关更多信息，请参见

• AngularJS Developer Guide - Component-based application architecture

---

角度2+双向绑定

使用Angular 2+，双向绑定（盒装香蕉）：

<app-sizer [(size)]="fontSizePx"></app-sizer>

是语法糖吗？

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

有关更多信息，请参见

• Angular.io Guide - Template Syntax - Two-way binding