Angular 1.5+ 组件可选单向绑定

Posted 2023-03-13

【中文标题】Angular 1.5+ 组件可选单向绑定

【英文标题】：Angular 1.5+ component optional one-way binding

【发布时间】：2017-05-10 02:32:10

【问题描述】：

取自 AngularJS 1 documentation:

您还可以通过添加? 使绑定成为可选：<? 或<?attr。

单向绑定的可选项与非可选项有何不同？

我似乎可以在我的小提琴上找出可选版本的双向 (=) 和委托 (&) 绑定的区别：https://jsfiddle.net/glenn/ze2wo0s1/，但不是单向绑定。

顺便说一句，圣诞快乐！ ????????????❤️

【参考方案1】：

您可以在源代码中看到它的处理方式：https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L3523。

在我看来，如果您使用 <? 并将绑定设为可选，它会提前中断而无需设置手表。如果使用使用< 并使其成为必需，它将绑定设置为undefined 并设置一个手表。但是，它似乎只是在观看undefined，因此实际上，除了对recordChanges 的一次调用之外，没有任何区别。如果您省略了所需的绑定，则所需的绑定将是changes 对象中的一个键，该对象在第一次调用时传递给$onChanges 挂钩。但是，当您省略可选绑定时，它不会成为 changes 对象中的键。

有关示例，请参阅此JSFiddle。 requiredBinding 和 optionalBinding 都被省略，因此初始化为 undefined，但 requiredBinding 是 change 对象上的键，而 optionalBinding 不是。

【讨论】：

哇，这么小的细节。谢谢你！ :)

【参考方案2】：

使用<? 使得控制器可以更改应该绑定的变量的值，前提是该变量不存在。

当它们不存在时，可以在控制器中修改可选绑定。如果将值传递给组件，则无法更改它。

不能修改非可选绑定。如果它们不存在，则它们是undefined，并且根本无法修改。

例如，假设你有这个：

bindings: 
  nameOptional: '<?',
  nameRequired: '<'

在控制器中，您不能简单地执行$ctrl.nameRequired = 'something else' 并期望视图得到更新。但是，您可以对nameOptional 执行相同的操作，但只有一个条件：只有name-optional 未传递给组件。只有这样，变量才是控制器要改变的。

为了更好的理解你可以参考this fiddle。

请注意，为了简化事情，我们使用了一个按值传递的字符串。如果您要传递对象，则在正常情况下始终可以修改对象的属性。