angular从0到1：样式(CSS)的使用(下)

原文链接：这里

0.前言

前面一篇文章中，我们主要介绍了ngClass的使用，这一篇文章中，我们简单介绍下ngStyle的用法。

1.实现

1.1基本用法

HTML：

<div [ngStyle]="{'background-color': 'green'}">

<p>窗前明月光</p>

</div>

效果：

1.2可以写多个（十分不建议）

HTML：

<div [ngStyle]="{'background-color': 'green','height':'100px', 'width':'100px','margin':'10px'}">

<p>窗前明月光</p>

</div>

效果：

1.3动态表示

<div [ngStyle]="{'background-color': isActive ? 'green':'red'}">

<p>窗前明月光</p>

</div>

 

<div [ngStyle]="{'background-color': username=='admin' ? 'green':'red'}">

<p>疑是地上霜</p>

</div>

 

<button (click)="change()">给我变！</button>

TS文件：

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

@Component({

selector: 'app-menu',

templateUrl: './menu.component.html',

styleUrls: ['./menu.component.scss']

 

})

export class MenuComponent implements OnInit {

isActive=true

username=''

 

constructor() {

 

}

ngOnInit(): void {

 

}

change(){

this.isActive =! this.isActive;

this.username='admin'

}

 

}

效果：

1.4你甚至可以写一个函数

HTML

<div [ngStyle]="{'background-color':changeColor()}">

<p>窗前明月光</p>

</div>

TS

 

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

@Component({

selector: 'app-menu',

templateUrl: './menu.component.html',

styleUrls: ['./menu.component.scss']

 

})

export class MenuComponent implements OnInit {

constructor() {

 

}

ngOnInit(): void {

 

}

changeColor(){

return "green"

}

}

 

效果：