Angular教程：详解样式绑定与使用

本文是关于Angular的详细知识教程解析，旨在帮助大家了解Angular样式绑定的使用与相关知识，下面一起来看一下。

Angular教程：详解样式绑定与使用

问题描述：

网站的两个页面需要用到同样一段代码，重复写两遍不符合dry（don’t repeat yourself）原则，效率也很低，所以公司里angular的前端开发项目中通常不会这么做。如果有一天领导告诉你：zzz，麻烦你改下代码，这句提示语我在这个页面想要呈现这个效果，在另一个页面要那个效果，这时你该怎么办呢？下面以一个简单的例子来说明。

公用的代码片段（修改前）：

<div class="normalTxt">      
    <span >I love angular</span>         
</div>

原因分析：

angular中的样式绑定可以实现上述需求，angular有两种样式绑定指令：[ngStyle]，[ngClass]

※注意：使用时必须用[ ] 方括号把他们括起来。

1.[ngStyle]

<any [ngStyle]=“obj”>

说明：

●  any代表样式绑定的标签类型可以是任何类型，比如是div,p,span等等都行。

●  在这里插入代码片ngStyle绑定的值必须是一个对象。

●  对象属性就是css样式名，对象的值是具体的样式。

简单用法（html文件）：

//将这段div的背景色改为绿色
<div [ngStyle]="{'background-color':'green'}">
xxxx
</div>

复杂用法（html文件）：

//如果当前页面为主页则将背景色改为绿色，否则改为红色
<div [ngStyle]="{'background-color':pageName== 'homepage' ? 'green' : 'red' }">
xxxx
</div>

2.[ngClass]

<any [ngClass]=“obj”>

说明：

●  any代表样式绑定的标签类型可以是任何类型，比如是div,p,span等等都行。

●  ngClass绑定的值必须是一个对象。

●  对象属性就是 class名，属性值为boolean类型结果只能为true/false,true的话该class就出现，否则该class不出现。

简单用法（html文件）：

//使用.homepageText样式
<div [ngClass]="{'homepageText':true}">
xxxx
</div>

复杂用法（html文件）：

//当页面名称是homepage时使用.homepageText样式，否则不使用
<div [ngClass]="{'homepageText':pageName =='homepage'}">
xxxx
</div>

（css文件）：

.homepageText {    
font-size: 14px;
font-weight: bold;
}

解决方案

公用的代码片段：

<div [ngClass]="{'normalTxt':pageTitle=='portal' ,'specialTxt':pageTitle=='detail'}">   
   <span>I love angular</span>         
</div>

说明：

portal页面想要展示normalTxt的效果，detail页面想要展示specialTxt的效果。normalTxt和specialTxt具体样式需要我们在相应的.css/.scss文件里添加。

关于Angular的样式绑定与使用详解就到这里，翼速应用平台内有更多相关资讯，欢迎查阅！