angular5 @viewChild @ContentChild ElementRef renderer2

@viewChild

做用一：選擇組件內節點

<!--視圖 --> <div #mydiv><input></div>

// 選擇 @ViewChild('mydiv') mydiv: ElementRef // 返回原生節點 let el = this.mydiv.nativeElement // // 使用原生方法 let ipt = el.querySelector('input')


做用二：選擇子組件可調用自組件內的函數

子組件：
@Component({ selector: 'user-profile' }) 

export class UserProfile { 
　　constructor() {} 
　　sendData() { //send data } 
}




當前組件
import { Component, ViewChild } from '@angular/core'; 
import { UserProfile } from '../user-profile'; 
@Component({ template: '<user-profile (click)="update()"></user-profile>', }) 

export class MasterPage { 
　　// ViewChild takes a class type or a reference name string. 
　　// Here we are using the type 

　　@ViewChild(UserProfile) userProfile: UserProfile 
　　constructor() { } ngAfterViewInit() { 

　　// After the view is initialized,
 　　this.userProfile will be available this.update(); 
　　} 
　　update() { 
　　　　this.userProfile.sendData(); 
　　} 
}

@ViewChild @ContentChild @ViewChildren @ContentChildren 又是什麼

@ViewChild 選擇組件模板內的節點

@ContentChild 選擇當前組件引用的子組件 @ContentChild(組件名)

@ViewChildren 和 @ContentChildren 則爲對應的複數

 

import { Component, ContentChild, AfterContentInit } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'exe-parent', template: ` <p>Parent Component</p> <ng-content></ng-content> ` }) export class ParentComponent implements AfterContentInit { @ContentChild(ChildComponent) childCmp: ChildComponent; ngAfterContentInit() { console.dir(this.childCmp); } }

import { Component } from '@angular/core'; @Component({ selector: 'exe-child', template: ` <p>Child Component</p> ` }) export class ChildComponent { name: string = 'child-component'; }

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h4>Welcome to Angular World</h4> <exe-parent> <exe-child></exe-child> </exe-parent> `, }) export class AppComponent { }

ContentChild 與 ViewChild 的異同點

相同點

• 都是屬性裝飾器

• 都有對應的複數形式裝飾器：ContentChildren、ViewChildren

• 都支持 Type<any>|Function|string 類型的選擇器

不一樣點

• ContentChild 用來從經過 Content Projection 方式 (ng-content) 設置的視圖中獲取匹配的元素

• ViewChild 用來從模板視圖中獲取匹配的元素

• 在父組件的 ngAfterContentInit 生命週期鉤子中才能成功獲取經過 ContentChild 查詢的元素

• 在父組件的 ngAfterViewInit 生命週期鉤子中才能成功獲取經過 ViewChild 查詢的元素

 

 

renderer2

// 添加類 this.renderer2.addClass(el, 'active') // 移除了類 this.renderer2.removeClass(el, 'active') // 設置樣式 this.renderer2.setStyle(el, 'height', '10px') // 移除樣式 this.renderer2.removeStyle(el, 'height') // 設置屬性 this.renderer2.setAttribute(el, 'data-id', 'id') // 移除屬性 this.renderer2.removeAttribute(el, 'data-id') // 設置值 this.renderer2.setValue(ipt, 'some str') // 監聽事件 this.renderer2.listen(el, 'click', (e)=>{console.log(e)}) //el|'window'|'document'|'body' // 其餘相似 createElement 建立元素 createComment 動態建立組件 createText 建立文本節點 destroyNode 銷燬節點 appendChild 插入子節點 insertBefore (parent: any, newChild: any, refChild: any): void removeChild(parent: any, oldChild: any): void 移除子元素 selectRootElement(selectorOrNode: string|any): any parentNode(node: any): any nextSibling(node: any): any