Angular中其实你不需要直接操作DOM

[deepthan]

需求： 有一个div，我要给他动态删除和增加样式

<div class='old-style'></div>

.old-style{
    width: 100px;
    height: 100px;
    background: #000;
}

我想给它改变它的样式为

.new-style{
    width: 200px;
    background: #069;
}

法一： 操作DOM，删除和增加class达到效果

获得DOM元素的引用移除旧的class old-style添加class new-style

1. 给原div加上 #demo，这个可以随意加任何字段只要是和第二步@ViewChild里一样就可以了。

<div class='old-style' #demo></div>

2. 获取DOM引用并删除和增加class

import { Component, ElementRef, ViewChild, Renderer2 } from '@angular/core';
...
export class DemoComponent implements OnInit {

    constructor( private renderer2 : Renderer2) { }
    
    @ViewChild('demo')  demo: ElementRef; 
    
    ngOnInit(){
        this.renderer2.removeClass(this.demo.nativeElement, "old-style"); 
        this.renderer2.addClass(this.demo.nativeElement, "new-style"); 
    }
    
}

法二： 操作DOM，修改其样式达到效果

获得DOM元素的引用设置新的 style

1. 给原div加上 #demo

<div class='old-style' #demo></div>

2. 获取DOM引用并设置新的style

import { Component, ElementRef, ViewChild, Renderer2 } from '@angular/core';
...
export class DemoComponent implements OnInit {

    constructor( private renderer2 : Renderer2) { }
    
    @ViewChild('demo')  demo: ElementRef; 
    
    ngOnInit(){
        this.renderer2.setAttribute(this.demo.nativeElement, "style","width: 200px;background: #006699;"); 
    }
}

这里是修改多个style所以用setAttribute，如果是修改单个style则使用 this.renderer2.setStyle(ele,name,value)

法三： 不操作DOM使用 ngClass修改class

定义一个布尔值，通过布尔值的改变来改变其class

ts:

private changeClass : boolean = false;

// 想要更改样式时直接更改 changeClass的值。

<div [ngClass]="changeClass ? 'new-class' : 'old-class' "></div>

当changeClass为false时 div class为old-class 为true时calss为 new-class

法四： 不操作DOM使用 ngStyle修改style

定义两个变量，通过变量改变来改变其style

ts:

private widthTemp : string = "100px";
private backgroundTemp : string = '#000'; 

// 想要更改样式时直接更改 changeClass的值。
this.widthTemp = '200px;';
this.backgroundTemp = '#069'

html

<div  [ngStyle]="{'background-color':backgroundTemp,'width': widthTemp}">></div>