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开发者指南-基于组件的应用程序架构

---

角度2+双向绑定

带Angular 2+，双向绑定(盒子里的香蕉(：

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

的句法糖

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

有关更多信息，请参阅

• Angular.io指南-模板语法-双向绑定

Answer 2

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

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

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