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

使迁移到 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

---

Angular 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

Answer 2

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

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

注意：此功能适用于1.5.x 版本当component AngularJS 中引入了 API