angular从0到1：样式(css)的使用(上)
0.前言
写代码最讨厌的一件事就是写css，真的是难啊。不过还是要写，这篇文章主要记录angular中样式的不同写法。具体演示的是[ngclass]。本文为了表示更加清除，没有使用template模板
1.引用css文件(最原始方法)
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 {
}
}
HTML文件
<div class="top">
<div class="left" >
<img src="http://www.petsnet.cn/wp-content/uploads/2017/01/e76bc1db5286ebad2b8a5e3489fe1586.jpg" alt="二哈">
</div>
</div>
CSS文件
.top{
margin-top: 30px;
text-align: center;
height: 800px;
width: 800px;
}
.left{
margin-left: 15px;
height: 600px;
}
img{
width: 500px;
height: 400px;
}
效果：
2.ngClass绑定
在angular可以使用angular内置的ngClass命令。但是百度了一下加上自己的尝试，还有其他不同的表示
第一种： 格式：
[ngClass]="{'class': true}"
[ngClass]="{ CSS类名01：布尔类型，CSS类名：布尔类型 }"
//注意：对象的键最好用引号括起来，因为有的字符如果不用引号括起来就会报错
//注意：对象的键值如果有特殊字符就需要用引号括起来，否则会报错（PS: 最好都用引号括起来）这个地方同步对比了ngClass和[ngClass]， 因为我百度的结果发现好多人用的ngClass，
<div [ngClass]="{'style1': true}">
<p>床前明月光</p>
<p>疑是地上霜</p>
</div>
<div ngClass="style1">
<p>床前明月光</p>
<p>疑是地上霜</p>
</div>
CSS文件
.style1{
background-color: burlywood;
height: 200px;
width: 200px;
border: 1px solid;
}
.style2{
background-color: darkcyan;
height: 300px;
width: 300px;
border: 2px solid red;
}
运行结果：
第二种：可以动态改变 （优势所在）
HTML
<div [ngClass]="{'style1': isActive1,'style2':isActive2}">
<p>窗前明月光</p>
</div>
<button (click)="change()">给我变！</button>
CSS
.style1{
background-color: burlywood;
height: 50px;
width: 200px;
border: 1px solid;
margin:10px;
}
.style2{
background-color:chartreuse;
height: 50px;
width: 200px;
border: 1px solid;
margin:10px;
}
TS
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
isActive1=true
isActive2=false
constructor() {
}
ngOnInit(): void {
}
change(){
this.isActive2 =! this.isActive2;
this.isActive1 =! this.isActive1
}
}
运行结果：
第三种：三目表达式
HTML
<div [ngClass]=" isActive ? 'style1':'style2' ">
<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
constructor() {
}
ngOnInit(): void {
}
change(){
this.isActive =! this.isActive;
}
}
