@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