Angular 2+中属性的规范化规则是什么？

Question

最近我遇到了一个使用title属性绑定该组件标题的组件的愚蠢问题。我忘了title是一个已知的HTML属性，我的用户开始看到标题超过其组件的工具提示。

起初，我只是将属性名称更改为不冲突。但后来我记得在AngularJS中有rules about normalization for directives。

我搜索（使用搜索功能）Angular 6+文档，我在那里找不到标准化这个词。我也测试了，似乎有一些标准化可用，至少使用data-。

我的问题是：Angular 6+是否正式支持规范化？我在哪里可以找到它的文档？

我用以下关键组件创建了一个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>

Answer 1

如果您使用的指令的输入可能与父元素的属性冲突，则您有3个选项。

1. 将指令的输入更改为非冲突的名称。
2. 使用绑定表示法 <button title="PushMe" titleTesting [title]="'dont push me'">Push this</button>
3. 使用属性表示法。 <button [attr.title]="'PushMe'" titleTesting title="dont push me">Push this</button>

上述模板中使用的指令代码：

@Directive({
  selector: '[titleTesting]'
})
export class TitleTestDirective implements OnInit {
  @Input() title: string;
  ngOnInit(){
    console.log(this.title);
  }
}

最后，如果值应该相同并且是模板中定义的常量，那么正常进行，因为元素和指令都将获得相同的值，例如：

<button titleTesting title="dont push me">Push this</button>

另见Binding syntax: An overview和Property binding or interpolation?，attribute binding和stackblitz。

---

正常化

简而言之，angular不支持或做任何正常化的事情。您已经列出了指令，但有一个组件示例，组件不会有任何冲突的属性/输入，这就是我选择使用指令建模示例的原因。

data-是一个HTML5结构。 angular没有直接做任何事情。如果你确实包含data-，虽然它仍然会按预期绑定到Input，但它不会在任何html特定属性上设置。示例：data-title="some title"。基于data- documentation这是预期的行为。

您可以为不同的值提供相同类型的data-和非data-元素，但它们出现的顺序很重要。例：

<button titleTesting title="Push me" data-title="DOn't push me">Push this</button>