在 Angular 中使用 Renderer2

在 Angular 中使用 Renderer2,第1张

Renderer2 类

Renderer2 类是 Angular 提供的一个抽象服务,允许在不直接 *** 作 DOM 的情况下 *** 纵应用程序的元素。这是推荐的方法,因为它使得更容易开发可以在没有 DOM 访问权限的环境中渲染的应用程序,比如在服务器上、在 Web Worker 中或在原生移动端。

基本用法

通常会在自定义指令中经常使用 Renderer2,因为 Angular 指令是修改元素的逻辑构建块。以下是一个简单的示例,使用 Renderer2 的 addClass 方法向具有该指令的元素添加 wild 类:

import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';@Directive({ selector: '[appGoWild]' }) export class GoWildDirective implements OnInit { constructor(private renderer: Renderer2, private el: ElementRef) {} ngOnInit() { this.renderer.addClass(this.el.nativeElement, 'wild'); } }

现在,您可以在模板中向元素添加该指令,渲染时将添加 wild 类:

<h1 appGoWild> Hello World! </h1> <!-- <h1 class="wild">Hello World!</h1> -->

您可以看到,总体上使用 Renderer2 并不比直接 *** 作 DOM 更复杂。现在让我们来看一些最有用的方法:

createElement / appendChild / createText

创建新的 DOM 元素并将它们附加到其他元素中。在这个例子中,我们创建一个新的 div 和一个文本节点。然后我们将文本节点放入我们的新 div 中,最后将我们的 div 添加到我们指令引用的元素中:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() { const div = this.renderer.createElement('div'); const text = this.renderer.createText('Hello world!'); this.renderer.appendChild(div, text); this.renderer.appendChild(this.el.nativeElement, div); }

我们的模板在渲染后将如下所示,假设我们在一个 article 元素上应用了该指令:

<article> <div>Hello world!</div> </article>

setAttribute / removeAttribute

使用 setAttribute 或 removeAttribute 来设置或移除属性:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() { this.renderer.setAttribute(this.el.nativeElement, 'aria-hidden', 'true'); }

addClass / removeClass

要添加类,可以执行以下 *** 作:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() { this.renderer.addClass(this.el.nativeElement, 'wild'); }

我们在上面的示例中已经介绍了 addClass。至于 removeClass,只需提供元素引用和要移除的类名:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() { this.renderer.removeClass(this.el.nativeElement, 'wild'); }

setStyle / removeStyle

使用 setStyle 使用 Renderer2 添加内联样式:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() { this.renderer.setStyle( this.el.nativeElement, 'border-left', '2px dashed olive' ); }

…并使用 removeStyle 来移除它:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() { this.renderer.removeStyle(this.el.nativeElement, 'border-left'); }

setProperty

通过以下示例,您可以在图像元素上设置 alt 属性:

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() { this.renderer.setProperty(this.el.nativeElement, 'alt', 'Cute alligator'); }

…或设置输入字段的值:

// ...ngOnInit() { this.renderer.setProperty(this.el.nativeElement, 'value', 'Cute alligator'); }

😄 这就结束了我们的概述。请参考 API 文档以获取可用方法的完整列表。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/13518830.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2024-03-07
下一篇 2024-03-16

发表评论

登录后才能评论

评论列表(0条)

保存