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

Question

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

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

我搜索（使用搜索功能）Angular 6+ 文档，但在其中找不到 normalization 这个词。 我也进行了测试，似乎有一些标准化可用，至少使用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>