有关结构型指令一些理解

结构型指令的展开写法

以 ngIf 内置指令指令为例，其余的内置指令参考官网

<!-- 简写 -->
<div *ngIf="show">ngIf content</div>
<!-- 展开写法 -->
<ng-template [ngIf]="show">
  <div>ngIf content</div>
</ng-template>

angular 在内部会创建一个 ng-template，并将结构型指令 ngIf 作用于这个元素，这个元素会包裹住元素内容

创建结构型指令

创建一个结构型指令的时候，指令的内部需要一个 TemplateRef 与 ViewContainerRef 类似于内置结构型指令的展开写法，angular 在内部会创建一个元素，这个元素就是 TemplateRef 类型的，需要使用 TemplateRef 取得  <ng-template>  的内容，并通过 ViewContainerRef 来访问这个视图容器 以官网的自定义结构型指令 unless 为例：

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

@Directive({ selector: "[appUnless]" })
export class UnlessDirective {
  private hasView = false;

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      // TemplateRef -> EmbeddedViewRef -> ViewContainerRef
      this.viewContainer.createEmbeddedView(this.templateRef); // 这一步实例化一个内嵌视图，并将这个内嵌实体插入到视图容器当中
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

在组件中使用指令

<!-- app.component.html -->
<!-- 简写 -->
<p *appUnless="show">这是一段内容</p>
<!-- 展开写法 -->
<ng-templete [appUnless]='show'>
  <p>这是一段内容</p>
</ng-template>