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);
  }
}

最后，如果值应该相同并且是模板中定义的常量，则按常规进行操作，因为element和您的指令将获得相同的值，例如：

<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>

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

1 个答案:

规范化