[英]Angular2 component one-way binding or input?
在角度2中,如果我看到<element [x]='' ..>
,我怎么知道x是一个导致单向数据绑定的指令(例如[ngClass]或[nyStyle]),或者它是一个应用于此标记的Angular组件的输入(组件配置中的输入)?
I don't think that you can distinguish them by some coding technique, but 我不认为你可以通过一些编码技术来区分它们,但是
if you just want to find out what this [x]
is doing here ? 如果你只是想知道这[x]
在这里做了什么? then 然后
There are three things that it might be doing there 它可能在那里做三件事
1. It's an Angular Directive eg: [ngModel]
[ngIf]
1.这是一个角度指令,例如: [ngModel]
[ngIf]
2. It's a Custom Directive eg: [directiveToConsoleLogTheContentOfAnInputField]
2.这是一个自定义指令,例如: [directiveToConsoleLogTheContentOfAnInputField]
3. It's just an Input/Output property or ( [oneWay]/ [(twoWay)] binding) for <element>
component. 3.它只是<element>
组件的输入/输出属性或([oneWay] / [(twoWay)]绑定) 。
<element>
component's .ts file and see if it's one of the input or output properties. 要确认这一点,只需转到<element>
组件的.ts文件,看看它是否是输入或输出属性之一。 Update: For more details see @MarkRajcok's answer. 更新:有关详细信息,请参阅@MarkRajcok的回答。 (Yes, I don't think that I know better.) (是的,我不认为我知道的更好。)
The syntax is ambiguous (if you're just reading the HTML template), which is something I don't like. 语法不明确(如果你只是阅读HTML模板),这是我不喜欢的。 I've asked about this previously (no answers yet): Why does simply [myHighlight]="..." work for an attribute directive? 我之前已经问过这个问题(还没有答案): 为什么简单的[myHighlight] =“...”适用于属性指令?
Assuming [x]
is not [style.x]
or [attr.x]
, then I believe [x]="..."
always indicates an input property databinding. 假设[x]
不是[style.x]
或[attr.x]
,那么我相信[x]="..."
总是表示输入属性数据绑定。 It gets a bit tricky because if the input property is defined on a directive/component that uses an attribute selector and it has the same name ( x
), then it is a shorthand for: x [x]="..."
. 它有点棘手,因为如果输入属性是在使用属性选择器且它具有相同名称( x
)的指令/组件上定义的,那么它是: x [x]="..."
的简写。 (I don't like the shorthand syntax, but I can't say I like the longhand syntax much, which does work, FYI.) (我不喜欢速记语法,但我不能说我喜欢冗长的语法,这确实有用,不管怎样。)
In other words, when Angular sees/parses [x]="..."
it checks to see if 换句话说,当Angular看到/解析[x]="..."
它会检查是否
x
available to the current view 有一个名称为x
的指令/组件可用于当前视图 '[x]'
它使用'[x]'
的属性选择器 x
too 我假设它也检查它是否有一个名为x
的输入属性 If the above are true, then it uses the directive/component. 如果以上都是真的,那么它使用指令/组件。
If the above is not true, then it looks to see if the element
has a property with the name x
. 如果上述情况不成立,那么它会查看该element
是否具有名为x
的属性。 If it doesn't we get that familiar Can't bind to 'x' since it isn't a known native property
error. 如果不是,我们就会熟悉Can't bind to 'x' since it isn't a known native property
错误。
The fact that Angular does the 2 (or 3) step checking means that the syntax is ambiguous, hence we have to mentally perform the same steps to determine what is really happening. Angular执行2(或3)步检查的事实意味着语法不明确,因此我们必须在心理上执行相同的步骤来确定实际发生的事情。 And this, my friends, is why I don't like it. 我的朋友们,这就是为什么我不喜欢它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.