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 个选项。

将指令的输入更改为不冲突的名称。

使用绑定符号

<button title="PushMe" titleTesting [title]="'dont push me'">Push this</button>

使用属性符号。

<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 and Property binding or interpolation?, attribute binding, and a stackblitz。

规范化

简而言之angular 不支持规范化或对规范化做任何事情。您列出了指令但有一个组件示例，一个组件不会有任何冲突 attributes/inputs 这就是为什么我选择使用指令对示例建模的原因。

data- 是一个 HTML5 结构。 angular 不会直接对它做任何事情。如果您确实包含 data-，尽管它仍会按预期绑定到输入，但不会在任何 html 特定属性上设置。示例：data-title="some title"。根据数据文档，这是预期的行为。

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

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

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

what are the normalization rules for properties in Angular 2+?

angular

angular2-directives

angular-directive

规范化