Angular2组件单向绑定还是输入？答案

【问题标题】：Angular2 component one-way binding or input?Angular2组件单向绑定还是输入？
【发布时间】：2016-07-06 16:46:17
【问题描述】：

在 Angular 2 中，如果我看到 <element [x]='' ..>，我怎么知道 x 是导致单向数据绑定的指令（例如 [ngClass] 或 [nyStyle]）还是 Angular 组件的输入应用于此标签（组件配置中的输入）？

【问题讨论】：

“它是另一个组件的输入”是什么意思？它可以是应用于此标签的 Angular 组件的输入、应用于此标签的 Angular 指令或原生元素的属性（或它们的组合）。
我猜调试工具将提供调查应用了哪些组件和指令的方法，但目前它们非常有限。

标签： angular

【解决方案1】：

我不认为你可以通过一些编码技术来区分它们，但是

如果你只是想知道[x] 在这里做什么？那么

它可能在那里做三件事

1. 这是一个 Angular 指令 例如：[ngModel] [ngIf]

要确认这一点，您可以搜索属性 here。

2.这是一个自定义指令 例如：[directiveToConsoleLogTheContentOfAnInputField]

要确认这一点，您必须了解您的自定义书面指令。

3. 它只是<element> 组件的输入/输出属性或（[oneWay]/ [(twoWay)] 绑定）。

要确认这一点，只需转到 <element> 组件的 .ts 文件，看看它是 input 还是 output 属性之一。

更新：有关更多详细信息，请参阅@MarkRajcok 的回答。（是的，我不认为我知道得更好。）

【讨论】：

我相信 1. 和 2. 仅在角度或自定义指令/组件使用与输入属性同名的属性选择器时才成立（有关详细信息，请参阅我的答案）。
您能否举一个第 4 项的示例。 -- 即，HTML 语法是 <element [x]="..."，这意味着它是一个 HTML 属性？
我只是假设我正在回答[x] 和x。我不知道我为什么这样做。

【解决方案2】：

语法不明确（如果您只是阅读 HTML 模板），这是我不喜欢的。我之前问过这个问题（还没有答案）：Why does simply [myHighlight]="..." work for an attribute directive?

假设[x] 不是[style.x] 或[attr.x]，那么我相信[x]="..." 总是表示输入属性数据绑定。它变得有点棘手，因为如果输入属性是在使用属性选择器的指令/组件上定义的并且它具有相同的名称 (x)，那么它就是：x [x]="..." 的简写。（我不喜欢简写语法，但我不能说我很喜欢简写语法，它确实有效，仅供参考。）

换句话说，当 Angular 看到/解析[x]="..." 时，它会检查是否

有一个名为 x 的指令/组件可用于当前视图
它使用'[x]'的属性选择器
我假设它还会检查它是否也有一个名为 x 的输入属性

如果以上为真，那么它使用指令/组件。
如果上述情况不正确，则查看element 是否具有名称为x 的属性。如果不是这样，我们就会遇到那个熟悉的Can't bind to 'x' since it isn't a known native property 错误。

Angular 执行 2（或 3）步检查的事实意味着语法是模棱两可的，因此我们必须在脑海中执行相同的步骤来确定真正发生的事情。我的朋友们，这就是我不喜欢它的原因。

【讨论】：