angular - 指令中的选择器

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表示具有名为 foo 的 CSS 类的元素

foo[bar]表示名为 foo 且属性名为 bar 的元素等

作为补充
指令的选择器可以用作输入，当该输入携带 bool 值以外的内容时特别有用(因为指令实例足以表明它是事件的)，使用 @Input decorator的“bindingPropertyName”参数在模板属性和 Directive 类属性之间使用不同的标记:

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