[英]what are the normalization rules for properties in Angular 2+?
I ran into a silly issue recently with a component that uses a title
property to bind the title of that component. 我最近遇到了一个愚蠢的问题,该组件使用
title
属性绑定该组件的标题 。 I forgot that title
was a known HTML attribute and my users started seeing tooltips with the title over their components. 我忘记了
title
是一个已知的HTML属性,我的用户开始看到带有标题的组件提示工具提示。
At first, I just changed the property name to not conflict. 首先,我只是将属性名称更改为不冲突。 But then I remembered that in AngularJS, there are rules about normalization for directives .
但是后来我想起了在AngularJS中存在关于指令规范化的规则 。
I searched (using the search function) the Angular 6+ documentation and I couldn't find the word normalization in there. 我搜索了Angular 6+文档(使用搜索功能),但在那里找不到单词normalization 。 I also tested and there seems to be some normalization available, at least using
data-
. 我也进行了测试,并且似乎可以使用一些规范化,至少使用
data-
。
My question is: Is normalization officially supported in Angular 6+? 我的问题是: Angular 6+是否正式支持规范化? and where can I find documentation for it?
在哪里可以找到它的文档?
I created a StackBlitz with the following key components to highlight that using data-name="bob"
is apparently equivalent to name="bob"
: 我创建了一个具有以下关键组件的StackBlitz ,以突出显示使用
data-name="bob"
显然等同于name="bob"
:
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1>Hello {{title}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() title: string;
}
<hello data-title="bob"></hello>
<hello title="bob"></hello>
If you are using a directive that has an input that could be in conflict with an attribute for the parent element you have 3 options. 如果使用的指令输入可能与父元素的属性冲突,则有3个选项。
Use binding notation 使用绑定符号
<button title="PushMe" titleTesting [title]="'dont push me'">Push this</button>
Use attribute notation. 使用属性符号。
<button [attr.title]="'PushMe'" titleTesting title="dont push me">Push this</button>
Directive code used in above template: 上面模板中使用的指令代码:
@Directive({
selector: '[titleTesting]'
})
export class TitleTestDirective implements OnInit {
@Input() title: string;
ngOnInit(){
console.log(this.title);
}
}
Finally if the values should be the same and is a constant defined in the template then proceed as normal as both the element and your directive would get the same value, example: 最后,如果值应该相同并且是模板中定义的常数,则按常规进行,因为element和您的指令将获得相同的值,例如:
<button titleTesting title="dont push me">Push this</button>
See also Binding syntax: An overview and Property binding or interpolation? 另请参见绑定语法:概述和属性绑定或插值? , attribute binding , and a stackblitz .
, 属性绑定和一个stackblitz 。
In short angular does not support or do anything with normalization. 简而言之, 角度不支持归一化处理或不进行任何归一化处理。 You had directive listed but had a component example, a component would not have any conflicting attributes/inputs which is why I chose to model an example using directives.
您已列出指令,但有一个组件示例,一个组件不会有任何冲突的属性/输入,这就是为什么我选择使用指令为示例建模的原因。
data- is an HTML5 construct. data-是HTML5构造。 angular does not do anything with that directly.
angular不直接做任何事情。 If you do include data- though it will still bind as expected to the Input but it won't be set on any html specific attribute.
如果您确实包含数据,尽管它仍会按预期绑定到Input,但不会在任何html特定属性上进行设置。 Example:
data-title="some title"
. 例如:
data-title="some title"
。 Based on the data- documentation this is expected behavior. 根据数据文档,这是预期的行为。
You can supply both a data- and a non data-
element of the same type for different values but the order in which they appear is important. 您可以提供既DATA-和非
data-
同一类型的不同值的元素,但它们出现是非常重要的顺序。 Example: 例:
<button titleTesting title="Push me" data-title="DOn't push me">Push this</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.