今天在做ng項(xiàng)目，看著前人的代碼有 viewChild() 等關(guān)鍵字破喻。新手有點(diǎn)疑惑擎场，索性查查資料總結(jié)一下和ng相關(guān)的幾個(gè)和DOM相關(guān)的幾個(gè)概念
ElementRef
由于ng是跨平臺的為了減少視圖層和渲染層的耦合也為了讓ng更適應(yīng)多平臺迅办，ng幫我們封裝了ElementRef，我們可以通過ElementRef拿到native元素(在瀏覽器中也就是我們常說的DOM元素)
下面我們看一段代碼
import { Component, ElementRef, AfterViewInit } from '@angular/core';
@Component ({
selector:'my-app',
template:`
<div #greet>Hello 哇牛！</div>
`
})
export class AppComponent(){
@ViewChild('greet') greetDiv: ElementRef
construcor(private elementRef: ElementRef, private renderer: Renderer) {
}
ngAfterViewInit() {
// 1: 這一種可以減少耦合贾虽，并且做到跨平臺
this.renderer.setElementStyle(this.greetDiv.nativeElement, 'backgroundColor',red)
// 2: 這一種寫法不提倡
this.greetDiv.nativeElement.backgroundColor='red'
}
}
TemplateRef && ViewContainerRef
template本身是HTML的標(biāo)簽菇肃，用于保存客戶端的內(nèi)容機(jī)制蟆技，該內(nèi)容在頁面渲染時(shí)不被加載，但是可以在運(yùn)行時(shí)被javascript解析,詳情可以看 Template HTML
TemplateRef
// @angular/core/src/linker/template_ref.d.ts
// 用于表示內(nèi)嵌的template模板，能夠用于創(chuàng)建內(nèi)嵌視(EmbeddedViews)
export declare abstract class TemplateRef<C> {
elementRef: ElementRef;
abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;
}
templateRef 下面有個(gè)抽象方法妻坝，不能直接實(shí)例化抽象類應(yīng)該實(shí)例抽象化類的子類刽宪，每個(gè)實(shí)例都具有createEmbeddedView方法
ViewContainerRef
import { Component, TemplateRef, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Welcome to Angular World</h1>
<template #tpl>
<span>I am span in template</span>
</template>
`,
})
export class AppComponent {
name: string = 'Semlinker';
@ViewChild('tpl')
tplRef: TemplateRef<any>;
@ViewChild('tpl', { read: ViewContainerRef })
tplVcRef: ViewContainerRef;
ngAfterViewInit() {
// console.dir(this.tplVcRef); (1)
this.tplVcRef.createEmbeddedView(this.tplRef);
}
}
TemplateRef：用于表示內(nèi)嵌的 template 模板元素庇谆，通過 TemplateRef 實(shí)例串述，我們可以方便創(chuàng)建內(nèi)嵌視圖(Embedded Views)，且可以輕松地訪問到通過 ElementRef 封裝后的 nativeElement觅赊。需要注意的是組件視圖中的 template 模板元素茉兰，經(jīng)過渲染后會被替換成 comment 元素。
ViewContainerRef：用于表示一個(gè)視圖容器，可添加一個(gè)或多個(gè)視圖被因。通過 ViewContainer
Ref 實(shí)例，我們可以基于 TemplateRef 實(shí)例創(chuàng)建內(nèi)嵌視圖，并能指定內(nèi)嵌視圖的插入位置呻粹，也可以方便對視圖容器中已有的視圖進(jìn)行管理腮郊。簡而言之，ViewContainerRef 的主要作用是創(chuàng)建和管理內(nèi)嵌視圖或組件視圖踪少。
