Angualr中操作Dom元素

Angualr中操作Dom元素

1:我想到的第一种就是JQuery,但是不建议
2:ElementRef
3:Renderer2+ElementRef
4:ViewChild(属性装饰器)
5:ts中定义属性,页面用指定

Renderer2+ElementRef

Renderer2更多操作:https://www.angular.cn/api/core/Renderer2
这里记录Renderer2+ElementRef:
1:在要使用的组建中引入: ElementRef ,Renderer2

import { Component, OnInit, ViewChild, ElementRef ,Renderer2} from '@angular/core';

2:构造函数中实例化

constructor(,private el:ElementRef,private renderer2: Renderer2) {  }

3:使用
这里我现在页面上有个id="showSize"的div.
然后在方法中使用:

this.el.nativeElement.querySelector('#showSize').style.height = '300px';
this.renderer2.setStyle(this.el.nativeElement.querySelector('#showSize'),'background','green')

如果是是class=“showSize”,直接把#换成’.'即可.