了解 ng元素 和 @Viewchild

Angular Element

ng-template

Angular 的 <ng-template> 元素定义了一个默认不渲染的模板。使用 <ng-template>，你可以定义一段模板内容，且仅当你直接或间接地明确指示 Angular 渲染时，Angular 才会渲染它，从而让你可以完全控制内容的显示方式和时机。

关于<ng-template>的几种用法:

在使用结构型指令时作为宿主

在使用*ngIf时

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

实际上是创建了如下的模板:

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

其实是使用<ng-template>包裹住了原来的内容。

在ngIf中使用

<div>
  Ng-template Content
  <div *ngIf="false else showNgTemplateContent">
    Shouldn't be displayed
  </div>
</div>

<ng-template #showNgTemplateContent>
    Should be displayed
</ng-template>

通过编程方式使用

<ng-template>可以看成是Angular中TemplateRef的一个实例。所以可以通过@ViewChild的方法获取到，然后进行编程处理。

ng-container

<ng-container>: 一种特殊元素，可以在不向 DOM 添加新元素的情况下承载结构型指令。
使用：

• 同时使用ngIf和ngFor的时候可以分开将ngIf作用于<ng-container>中。
• 使用ngIf时用来包裹控制显示的内容。
• 结合ng-template与NgTemplateOutlet使用

需要注意的是，当完成渲染后，<ng-container>并不会被渲染为dom元素。

ng-content

ng-content用于将内容投影到Angular组件中。你使用<ng-content></ng-content>标记作为该动态内容的占位符，那么当模板被解析时，Angular将用您的内容替换该占位符标记。

父组件中：

<app-child>
  <div> Child Component Details </div>
</app-child>

同时在子组件也有<ng-content></ng-content>，那 <div> Child Component Details </div>就会渲染在<ng-content></ng-content>所在的位置。

装饰器 @ViewChild

装饰器@ViewChild是用来获取模板变量的元素的，当渲染完成后，会更新为从dom上找到第一个匹配的元素然后封装成Angular中的ElementRef。
他的元数据包括三种：

• selector: 选择DOM元素
• read: 以什么形式来赋值给变量
• static: 何时更新DOM

其中selector常用形式

注： 目标查找范围只限当前组件，对于当前组件的子组件中的DOM元素是获取不到的。

Angular 装饰器类

这种方式可以到两种类：@Component和@Directive。

@Component具体使用：
app.component.html

<app-a></app-a>
<app-b></app-b>

app.component.ts

@ViewChild(AComponent)
element: any;

ngAfterViewInit(): void {
    console.log('after view init', this.element);
}

结果：

---

@Directive具体使用：
app.component.html

<app-a></app-a>
<app-b appSelect></app-b>

app.component.ts

@ViewChild(SelectDirective)
element: any;

...

结果：

模板引用变量

模板引用变量：使用# + string 定义

<element-name #cmp></element-name>

其中element-name可以是自定义组件名和原生元素名。
具体使用
app.component.html

<app-a #cmp1></app-a>
<div #cmp2>盒子</div>

app.component.ts

1. 自定义组件使用模板变量

   @ViewChild('cmp1')
   element: any;

   

2. 原生元素使用

   @ViewChild('cmp2')
   element: any;

   

read的含义

元数据中read是用于从查询到的元素中读取不同的令牌。
令牌: 标识符，用于在依赖注入系统中标识和定位一个特定的依赖项。

以上文中模板引用变量的内容举例，自定义组件获取的值是组件的实例，而原生元素获取到的值是ElementRef类的实例。

所以当通过@ViewChild找到目标之后，可能有多种令牌，比如对于

<app-a appSelect #cmp></app-a>

至少存在三种令牌：ElementRef、AComponent、SelectDirective。
所以对于同一个DOM，使用不同的read会得到不同的结果：

1. @ViewChild('cmp', {read: ElementRef})
   
   
2. @ViewChild('cmp', {read: AComponent})
   
   
3. @ViewChild('cmp', {read: SelectDirective})
   
   

static

static: 如果为 true，则在变更检测运行之前解析查询结果，如果为 false，则在变更检测之后解析。默认为 false。

---

参考：
Angular Element
理解模板变量
ng-template
@ViewChild
angular-viewchild