指令中的选择器

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中，我们通常指定不带方括号的选择器。为什么我需要在Directives中指定方括号？

Answer 1

因为选择器是一个CSS选择器。您在CSS文件中使用的相同类型的选择器，用于指定CSS规则所关注的元素：

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