Angular基础--元素操作

最新推荐文章于 2023-09-14 11:29:46 发布

转载最新推荐文章于 2023-09-14 11:29:46 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3412211/blog/1550793

文章标签：

#javascript #python #ViewUI

本文介绍了Angular中进行DOM操作的主要方式，包括使用Renderer2和ElementRef进行DOM元素的查找与操作，以及ViewChild等装饰器的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

Angular中主要DOM元素操作基本就两种方法：

1、Renderer2、ElementRef

2、ViewChild、ViewChildren、ContentChild、ContentChildren

class Renderer2 {
  get data(): {[key: string]: any}
  destroy(): void
  createElement(name: string, namespace?: string|null): any
  createComment(value: string): any
  createText(value: string): any
  destroyNode: ((node: any) => void)|null
  appendChild(parent: any, newChild: any): void
  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
  setAttribute(el: any, name: string, value: string, namespace?: string|null): void
  removeAttribute(el: any, name: string, namespace?: string|null): void
  addClass(el: any, name: string): void
  removeClass(el: any, name: string): void
  setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void
  removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void
  setProperty(el: any, name: string, value: any): void
  setValue(node: any, value: string): void
  listen(target: 'window'|'document'|'body'|any, eventName: string, callback: (event: any) => boolean | void): () => void
}

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

通过ElementRef查找DOM元素，如

let element = elementRef.nativeElement.querySelector('...')

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

ViewChild、ViewChildren可以从模板引用元素，ViewChildren引用的为 QueryList。

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

转载于:https://my.oschina.net/u/3412211/blog/1550793