Question

以下是关于属性指令的Angular文档的指令示例 https://angular.io/guide/attribute-directives

import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

在它下面，他们用以下文字解释它

import语句指定Angular核心中的符号：
指令提供@Directive装饰器的功能。
ElementRef注入指令的构造函数，因此代码可以访问DOM元素。
输入允许数据从绑定表达式流入指令。

我不清楚第四点，他们说输入允许数据从绑定表达式流向指令，但是在没有使用Input的类中，那么Angular如何使用它，因为之前我读过NgModule文档，top上的import语句与Angular无关

所以我的理解是每当Angular遇到属性指令时，它会使用类HighlightDirective创建一个对象，但由于它没有对Input的任何引用，它如何从绑定表达式获取数据流

所以在我的理解中，因为我们不在这里访问数据，所以我们不需要在顶部导入输入模块

Answer 1

HighlightDirective指令没有@Input()

如果你看一下*ngIf指令的来源，它应该变得更加清晰

@Directive({selector: '[ngIf]'})
export class NgIf {
  ...

  constructor(private _viewContainer: ViewContainerRef, templateRef: TemplateRef<NgIfContext>) {
    this._thenTemplateRef = templateRef;
  }

  @Input()
  set ngIf(condition: any) {
    this._context.$implicit = this._context.ngIf = condition;
    this._updateView();
  }

这个指令确实有一个输入，我假设你熟悉它的用法

<div *ngIf="isVisible"

其中isVisible的值传递给@Input() ngIf;（在这种情况下是一个setter但我把它关掉了，因为一般来说它只是一个字段，而不是一个setter）

Answer 2

您不需要将Input用于此指令，因为它放在元素上，我们通过将指令放在元素顶部然后直接修改元素颜色来获取元素的所有属性。

但是一旦你需要将值传递给你需要的指令使用@Input。比如用于传递背景颜色动态地随时随地。

查看输入导入LINK

的工作示例

在创建角度指令

2 个答案: