angular官网-指令

参考：
内置指令：https://angular.cn/guide/template-syntax#built-in-directives
属性指令：
结构指令：

angular中的指令类型：

1. 组件 ：一种拥有模板的指令。=> 最常用的
2. 结构型指令：通过添加或者移除DOM元素，改变DOM布局的指令。=>修改视图结构。eg：NgIf，NgFor，NgSwitch。 一般都是“ * ”开头。
   使用：*ngIf，*ngFor，ngSwitch：ngSwitchCase和ngSwitchDefault。
3. 属性型指令：改变元素、组件或其他指令的外观和行为的指令。=>改变一个元素的外观和行为。eg：NgStyle，NgClass。一般都是圆括号或者方括号。eg：（click），[ngClass]。

还可以分类为：内置指令 和 自定义指令。

使用：

注：可以在一个宿主元素上应用多个属性型指令，但只能应用一个结构型指令。
当两个指令放在同一个元素上时，谁先谁后？NgIf 优先还是 NgFor 优先？NgIf 可以取消 NgFor 的效果吗？

这种情况下有一个简单的解决方案：把 *ngIf 放在一个"容器"元素上，再包装进 *ngFor 元素。 这个元素可以使用ng-container，以免引入一个新的 HTML 层级。

参考官网：
结构型指令：https://angular.cn/guide/structural-directives

指令的类名：大驼峰写法（UpperCamelCase）eg：NgIf ；
指令的属性名：小驼峰写法（lowerCamelCase）eg：*ngIf ；

命名规则：
大驼峰写法 UpperCamelCase
小驼峰写法 lowerCamelCase

星号(*)这个简写方法，是一个微语法，而不是通常的模板表达式。 Angular 会解开这个语法糖，变成一个 <ng-template> 标记，包裹着宿主元素及其子元素。 每个结构型指令都可以用这个模板做点不同的事情。

• *ngIf的内幕：

*ngIf是移除而不是隐藏。

a.当条件为假时，NgIf 会从 DOM 中移除它的宿主元素，取消它监听过的那些 DOM 事件，从 Angular 变更检测中移除该组件，并销毁它。 这些组件和 DOM 节点可以被当做垃圾收集起来，并且释放它们占用的内存。

b.如果仅仅是display:none;的话：
当隐藏掉一个元素时，组件的行为还在继续 —— 它仍然附加在它所属的 DOM 元素上， 它也仍在监听事件。Angular 会继续检查哪些能影响数据绑定的变更。 组件原本要做的那些事情仍在继续。

内幕：

<div *ngIf="hero">{{hero.name}}</div>

星号是一个用来简化更复杂语法的“语法糖”。 从内部实现来说，Angular 把 *ngIf 属性 翻译成一个 元素 并用它来包裹宿主元素，代码如下：

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

属性：[ngIf]=‘hero’

• *ngFor的内幕：

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

属性：[ngForOf]=‘heroes’，[ngForTrackBy]="trackById，let-i=“index”，let-odd="odd"等。

具体的ngFor参数：https://blog.csdn.net/weixin_42995876/article/details/89501208

• NgSwitch 内幕

Angular 的 NgSwitch 实际上是一组相互合作的指令：NgSwitch、NgSwitchCase 和 NgSwitchDefault。

<div [ngSwitch]="hero?.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
</div>

NgSwitch 本身不是结构型指令，而是一个属性型指令。
NgSwitchCase 和 NgSwitchDefault 都是结构型指令。

• <ng-template>指令

如果没有使用结构型指令，而仅仅把一些别的元素包装进 <ng-template> 中，那些元素就是不可见的。Angular 会把 <ng-template> 及其内容替换为一个注释。结构型指令会让 <ng-template> 正常工作。

<p>Hip!</p>
<ng-template>
  <p>Hip2!</p>
</ng-template>
<p>Hooray!</p>

结果如下：

• <ng-container>

Angular 的 <ng-container> 是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。eg：<select> 元素要求直属下级必须为 <option>，那就没办法把这些选项包装进 <div> 或 <span> 中。
如下：会有问题的！

<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

<ng-container> 是一个由 Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。

• 写一个结构型指令

HTML：

<div>codition的值：{{condition}}</div>
<div>切换condition：<button (click)="condition=!condition;">切换</button></div>
<div *appUnless="condition">false-情况</div>
<div *appUnless="!condition">true-情况</div>

unless.directive.ts：

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

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {

  constructor(private templateRef: TemplateRef,
              private viewContainer: ViewContainerRef,) {
  }
  // *导入符号 Input、TemplateRef 和 ViewContainerRef，你在任何结构型指令中都会需要它们。*
  // 可以使用TemplateRef取得 <ng-template> 的内容，并通过ViewContainerRef来访问这个视图容器。
  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else if (condition) {
      this.viewContainer.clear();
    }
  }
  
  // 一旦该值（condition）的条件发生了变化，Angular 就会去设置 appUnless 属性。因为不能用 appUnless 属性，所以你要为它定义一个设置器（setter）。
  //
  // 如果条件为假，并且以前尚未创建过该视图，就告诉视图容器（ViewContainer）根据模板创建一个内嵌视图。
  //
  // 如果条件为真，并且视图已经显示出来了，就会清除该容器，并销毁该视图。
  //
  // 没有人会读取 appUnless 属性，因此它不需要定义 getter。
}

ng g c hero-switch --flat=true -s -t

--flat=true 不生成文件夹 ，直接--flat也可以
-s即 --inlineStyle=true，css在组件内
-t 即--inlineTemplate=true，html在组件内

component中导出多个组件（多个组件放在一个页面）：

export const heroSwitchComponents =
  [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];

module中：

  declarations: [
    AppComponent,
    ...heroSwitchComponents,
	 // heroSwitchComponents, // 直接给数组也是可以的！
  ],

• 写一个属性指令

<div appHighlight>我是新的内容</div>

// js:
import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }

}

改进：绑定事件！
使用 HostListener 装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(public el: ElementRef) {
    // el.nativeElement.style.backgroundColor = 'yellow';
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

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

其中：

<p appHighlight highlightColor="yellow">Highlighted in yellow</p>
<p appHighlight [highlightColor]="'orange'">Highlighted in orange</p>

有这两种写法！

改进：用户传入颜色！

<div [appHighlight]='color'>我是新的内容</div>


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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(public el: ElementRef) {
    // el.nativeElement.style.backgroundColor = 'yellow';
  }

  @Input('appHighlight') highlightColor: string;  // 指定别名！

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor);
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

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

加上默认值：

<div [appHighlight]='color'>我是新的内容</div>
<div appHighlight>我是新的内容</div>

 this.highlight(this.highlightColor || 'red');

改进：多个属性时：eg：自定义一个颜色，默认给一个基本色，再然后是实在没办法的默认色！

<p [appHighlight]="color" defaultColor="violet">
  Highlight me too!
</p>