指令中的选择器

Question

下面的指令应该隐藏一个元素。

import {Directive, ElementRef, Input, Renderer2} from '@angular/core';
import {el} from "@angular/platform-browser/testing/src/browser_util";

// Directive decorator
@Directive({ selector: '[hide-me]' })
// Directive class
export class MyHiddenDirective {
//  @Input() hideme:boolean;
  constructor(public el: ElementRef, public  renderer: Renderer2) {
    // Use renderer to render the element with styles
        renderer.setStyle(el.nativeElement, 'display', 'none');

  }
}

我是这样使用的：

<div>Name: <input hide-me #myint  type="text" name="name" [(ngModel)]="this.name" />  You entered {{this.name}} {{myint.hasAttribute('required')}}</div>

为什么 selector: '[hide-me]' 有效而 selector: 'hide-me' 无效？当我使用指令 <input hide-me... 而不是 <input [hide-me]... 时，我不使用方括号。在 Components 中，我们一般指定不带方括号的选择器。为什么我需要在指令中指定方括号？

Answer 1

因为选择器是CSS选择器。您在 CSS 文件中使用的相同类型的选择器来指定 CSS 规则涉及的元素：

foo 表示名称为 foo
[foo] 表示具有名为 foo
.foo 表示具有 CSS class 名称的元素 foo
foo[bar] 表示名为 foo 的元素具有名为 bar 的属性，等等

作为补充
指令的选择器可以用作输入，当输入携带某些东西时特别有用除了布尔值（因为指令实例足以表明它是活动的），使用 @Input decorator 的“bindingPropertyName”参数在模板属性和指令 class [=49= 之间使用不同的标记]:

@Directive({ selector: '[enhanced-me]' })
export class NodeEnhancementDirective {
  @Input('enhanced-me') options: {foo: true, bar: true} ;
}

指令中的选择器

Selector in Directives

angular2-directives

angular