renderer2 in Angular

最新推荐文章于 2024-05-19 06:58:06 发布

双鱼心梦

最新推荐文章于 2024-05-19 06:58:06 发布

阅读量505

点赞数

文章标签： angular.js

本文链接：https://blog.csdn.net/weixin_41995297/article/details/120490015

版权

Renderer2是Angular核心组件，用于安全地操作DOM。通过使用Renderer2提供的方法，开发者可以在不直接接触DOM的情况下改变页面元素样式，例如设置字体颜色等。了解更多方法可查阅Angular官方文档。

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

Renderer2是Angular提供的操作element的抽象类，使用该类提供的方法，能够实现不直接操作DOM的情况下操作页面的元素，下面只是举该类的一些方法，具体还有哪些方法可以查看官网

<div #render>

</div>

.font-style{
color:red;
}

@ViewChild('render', { static: true }) render: ElementRef;
export class WqTestComponent implements OnInit {
constructor( 
    public render2: Renderer2,
  ) {}
ngOnInit() {
    this.setElement();
  }  


setElement() {
    const div = this.render2.createElement('h1');
    const text = this.render2.createText('我叫王清呀');
    this.render2.appendChild(div, text);
    this.render2.appendChild(this.render.nativeElement, div);
    this.render2.addClass(this.render.nativeElement,'font-style');
    // setStyle/removeStyle 在宿主元素上添加inline-style
    this.render2.setStyle(this.render.nativeElement,'padding-left','40px');
  }
  }