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

Question

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

Answer 1

我不认为您可以通过某种编码技术来区分它们，但

如果你只是想知道这里[x]做了什么？然后

它可能在那里做三件事

1。这是 Angular Directive ，例如：[ngModel] [ngIf]

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

2。这是自定义指令，例如：[directiveToConsoleLogTheContentOfAnInputField]

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

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

• 要确认这一点，只需转到<element>组件的 .ts 文件，看看它是否为输入或输出之一属性。

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

Answer 2

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

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

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

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

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

Angular执行2（或3）步检查意味着语法不明确，因此我们必须在心理上执行相同的步骤来确定实际发生的事情。我的朋友们，这就是为什么我不喜欢它。