指令

分类

• 组件：带有模版的指令

• 属性型指令：更改元素、组件或其他指令的外观或行为的指令。

• 结构型指令：通过添加和删除 DOM 元素来更改 DOM 布局的指令

内置属性型指令

• ngClass
• ngStyle
• ngModel：NgModel 指令适用于 ControlValueAccessor 支持的元素。Angular 为所有基本 HTML 表单元素提供了值访问器。

内置结构型指令

每个元素只能应用一个结构型指令。

• *ngFor

trackBy: 如果没有 trackBy 则，每次 angular 都会重新渲染列表中的所有元素；如果有了 trackBy，则只会重新渲染 trackBy 跟踪的属性变化的元素。用于性能优化

• *ngIf

ngIf 为假值时，则 Angular 将从 DOM 中移除一个元素及其后代。然后，Angular 会销毁其组件，从而释放内存和资源。

• ngSwitch

  NgSwitch 是一组指令（共三个）：NgSwitch 会根据切换条件显示几个可能的元素中的一个。

  • NgSwitch —— 一个属性型指令，它更改其伴生指令的行为。

  • NgSwitchCase —— 结构型指令，当其绑定值等于开关值时将其元素添加到 DOM 中，而在其不等于开关值时将其绑定值移除。

  • NgSwitchDefault —— 结构型指令，当没有选中的 NgSwitchCase 时，将其宿主元素添加到 DOM 中。

编写一个属性型指令

• 基本的属性型指令

import { Directive, ElementRef } from "@angular/core";

@Directive({
  selector: "[appHighlight]"
})
export class HighlightDirective {
  // 在指令的 constructor() 中添加 ElementRef 以注入对宿主 DOM 元素的引用，该元素就是 appHighlight 的作用目标。
  constructor(el: ElementRef) {
    // ElementRef 的 nativeElement 属性会提供对宿主 DOM 元素的直接访问权限。
    el.nativeElement.style.backgroundColor = "yellow";
  }
}

• 使用

高亮

• 事件监听 @HostListener

import { Directive, ElementRef, HostListener } from "@angular/core";

@Directive({
  selector: "[appHighlight]"
})
export class HighlightDirective {
  @HostListener("mouseenter") onMouseEnter() {
    this.highlight("yellow");
  }
  @HostListener("mouseleave") onMouseLeave() {
    this.highlight("");
  }
  public el: ElementRef;
  constructor(el: ElementRef) {
    this.el = el;
  }

  public highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

• 设置输入属性

import { Directive, ElementRef, HostListener, Input } from "@angular/core";

@Directive({
  selector: "[appHighlight]"
})
export class HighlightDirective {
  @HostListener("mouseenter") onMouseEnter() {
    this.highlight("yellow");
  }
  @HostListener("mouseleave") onMouseLeave() {
    this.highlight("");
  }
  @Input() defaultColor = "";
  public el: ElementRef;
  constructor(el: ElementRef) {
    this.el = el;
  }

  public highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

英语练习题库

通过 NgNonBindable 停用 Angular 处理过程

要防止在浏览器中进行表达式求值，请将 ngNonBindable 添加到宿主元素。ngNonBindable 会停用模板中的插值、指令和绑定。

在下面的示例中，表达式 {{ 1 + 1 }} 的渲染方式会和在代码编辑器的一样，而不会显示 2。

Use ngNonBindable to stop evaluation.
This should not evaluate: {{ 1 + 1 }}

将 ngNonBindable 应用于元素将停止对该元素的子元素的绑定。但是，ngNonBindable 仍然允许指令在应用 ngNonBindable 的元素上工作。

如果将 ngNonBindable 应用于父元素，则 Angular 会禁用该元素的子元素的任何插值和绑定，例如属性绑定或事件绑定。

编写结构型指令

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({
  selector: "[appUnless]"
})
export class UnlessDirective {
  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
  public hasView = false;
  // UnlessDirective 会通过 Angular 生成的  创建一个嵌入的视图
  // 然后将该视图插入到该指令的原始 
 宿主元素紧后面的视图容器中。
  // TemplateRef可帮助你获取  的内容，而 ViewContainerRef 可以访问视图容器。
  constructor(
    private templateRef: TemplateRef,
    private viewContainer: ViewContainerRef
  ) {}
}

使用

  (A) This paragraph is displayed because the condition is false.


  

    (A) This paragraph is displayed because the condition is false.
  

结构型指令（例如 _ngIf）上的星号 _ 语法是 Angular 解释为较长形式的简写形式。 Angular 将结构型指令前面的星号转换为围绕宿主元素及其后代的 。

用 创建模板片段

Angular 的 元素定义了一个默认情况下不渲染任何内容的模板。使用 ，你可以手动渲染内容，以完全控制内容的显示方式。

如果没有结构型指令，并且将某些元素包装在 中，则这些元素会消失。