Angular基础元素操作

Angular中主要DOM元素操作基本就两种方法&＃xff1a;

1、Renderer2、ElementRef

2、ViewChild、ViewChildren、ContentChild、ContentChildren

class Renderer2 {get data(): {[key: string]: any}destroy(): voidcreateElement(name: string, namespace?: string|null): anycreateComment(value: string): anycreateText(value: string): anydestroyNode: ((node: any) &＃61;> void)|nullappendChild(parent: any, newChild: any): voidinsertBefore(parent: any, newChild: any, refChild: any): voidremoveChild(parent: any, oldChild: any): voidselectRootElement(selectorOrNode: string|any): anyparentNode(node: any): anynextSibling(node: any): anysetAttribute(el: any, name: string, value: string, namespace?: string|null): voidremoveAttribute(el: any, name: string, namespace?: string|null): voidaddClass(el: any, name: string): voidremoveClass(el: any, name: string): voidsetStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): voidremoveStyle(el: any, style: string, flags?: RendererStyleFlags2): voidsetProperty(el: any, name: string, value: any): voidsetValue(node: any, value: string): voidlisten(target: &＃39;window&＃39;|&＃39;document&＃39;|&＃39;body&＃39;|any, eventName: string, callback: (event: any) &＃61;> boolean | void): () &＃61;> void
}

class ElementRef {constructor(nativeElement: any)nativeElement: any
}

通过ElementRef查找DOM元素&＃xff0c;如

let element &＃61; elementRef.nativeElement.querySelector(&＃39;...&＃39;)

通过renderer可以创建节点、元素、监听事件等等等等

ViewChild、ViewChildren可以从模板引用元素&＃xff0c;ViewChildren引用的为 QueryList。

ContentChild、ContentChildren一般是在内嵌模板中用到