Question

我注意到指令的选择器通常在[]中指定，但在没有[]括号的情况下使用。为什么呢？

@Directive({
  selector: '[appGoWild]'
})
export class GoWildDirective implements OnInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    this.renderer.addClass(this.el.nativeElement, 'wild');
  }
}

HTML中的用法

<h1 appGoWild>
  Hello World!
</h1>

Answer 1

根据docs：

括号（[]）使其成为属性选择器。

因此，使用括号，选择器引用一个属性，并且必须在您声明时写入：

<h1 appGoWild>

如果没有括号，选择器将引用一个元素：

<appGoWild>

在上述文档中，您可以在文章末尾找到app-root指令的示例。

Answer 2

选择器中的[]表示传递的选择器名称将是标记的属性，而不是标记本身。

如果没有[]，则选择器将用作：

@Directive({
  selector: 'appGoWild'
})

<appGoWild></appGoWild>

Answer 3

这基本上是针对属性

的CSS选择器

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 4

这些方括号是不同的东西。

选择器中的

[]对应于CSS属性选择器。大多数使用的指令都是属性指令（自AngularJS以来就已知），因此属性选择器经常出现。

模板中的

[]为property binding。如果指令具有相应的@Input属性，则<h1 appGoWild>和<h1 [appGoWild]>都将起作用。否则应使用<h1 appGoWild>，因为<h1 [appGoWild]>将导致编译器错误。

Answer 5

希望你从别人那里得到理解答案，现在我正在解释一下选择器，以便在此处获得清晰的视图。

选择器有三种类型

元素选择器 - 您可以创建新的html标签
类选择器 - 您可以将其用作HTML标记中的类

属性选择器 - 您可以在HTML中创建新属性

selector : 'your-option'    // element selector
selector : '[your-option]'  // property selector
selector : '.your-option'   // class selector

在HTML中使用它

<your-option></your-option>      /* this is element selector usage
<div your-option></div>          /* this is property selector usage
<div class="your-option"></div>  /* this is class selector usage

Answer 6

使用属性选择器[]作为指令是一种惯例。因为指令通常会修改它附加到的元素的行为。

例如：我们可以使用指令appChangeColor更改hover上的背景颜色。这可以应用于任何元素 - <p>或<a>。

<p appChangeColor>Some Text</p>
<a appChangeColor>Some Link</a>

如果我们使用元素选择器，那么就不可能将这种行为添加到元素中。

为什么指令选择器在`[]`

6 个答案: