Angular学习之详解样式绑定(ngClass和ngStyle)的使
项目场景:
前端开发中经常会遇到这样一种情况:不同的页面会共用同一段代码,同时我们要根据页面的具体信息或者某种操作(例如点击某个按钮)去决定是否展示这段代码或使页面样式做出一定的改变,这时就用到我们angular中的样式绑定!
问题描述
例如:网站的两个页面需要用到同样一段代码,重复写两遍不符合dry(don’t repeat yourself)原则,效率也很低,所以公司里angular的前端开发项目中通常不会这么做。如果有一天领导告诉你:zzz,麻烦你改下代码,这句提示语我在这个页面想要呈现这个效果,在另一个页面要那个效果,这时你该怎么办呢?下面以一个简单的例子来说明。【相关教程推荐:《angular教程》】
公用的代码片段(修改前):
<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文件里添加。
更多编程相关知识,请访问:编程入门!!