指令中的选择器

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 类的元素 foo
• foo[bar]表示名为 foo 且具有名为bar等的属性的元素。

作为一种补充
的指令的选择器可以用作输入，这是特别有用的，当该输入携带比一个布尔以外的内容（如指令实例足以告诉它是激活的），则使用@input装饰的‘bindingPropertyName’在模板属性和 Directive 类属性之间使用不同标记的参数：

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