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