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;

}

}