扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了“Angular中ngClass和ngStyle如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Angular中ngClass和ngStyle如何使用”吧！
成都创新互联公司专注于企业成都全网营销、网站重做改版、大兴网站定制设计、自适应品牌网站建设、H5网站设计、商城网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为大兴等各大城市提供网站开发制作服务。
前端开发中经常会遇到这样一种情况：不同的页面会共用同一段代码，同时我们要根据页面的具体信息或者某种操作（例如点击某个按钮）去决定是否展示这段代码或使页面样式做出一定的改变，这时就用到我们angular中的样式绑定！
例如：网站的两个页面需要用到同样一段代码，重复写两遍不符合dry（don’t repeat yourself）原则，效率也很低，所以公司里angular的前端开发项目中通常不会这么做。如果有一天领导告诉你：zzz，麻烦你改下代码，这句提示语我在这个页面想要呈现这个效果，在另一个页面要那个效果，这时你该怎么办呢？下面以一个简单的例子来说明。
公用的代码片段（修改前）：
angular中的样式绑定可以实现上述需求，angular有两种样式绑定指令：[ngStyle]，[ngClass]
注意：使用时必须用[ ] 方括号把他们括起来!
1.[ngStyle]
说明：
any代表样式绑定的标签类型可以是任何类型，比如是div,p,span等等都行。
在这里插入代码片ngStyle绑定的值必须是一个对象。
对象属性就是css样式名，对象的值是具体的样式。
简单用法（html文件）：
//将这段div的背景色改为绿色
复杂用法（html文件）：
//如果当前页面为主页则将背景色改为绿色，否则改为红色
2.[ngClass]
说明：
any代表样式绑定的标签类型可以是任何类型，比如是div,p,span等等都行。
ngClass绑定的值必须是一个对象。
对象属性就是 class名，属性值为boolean类型结果只能为true/false,true的话该class就出现，否则该class不出现。
简单用法（html文件）：
//使用.homepageText样式
复杂用法（html文件）：
//当页面名称是homepage时使用.homepageText样式，否则不使用
（css文件）：
.homepageText {
font-size: 14px;
font-weight: bold;
}
以下是开头问题的解决方案，希望给各位带来一些启发
公用的代码片段（修改后）：
说明：portal页面想要展示normalTxt的效果，detail页面想要展示specialTxt的效果。normalTxt和specialTxt具体样式需要我们在相应的.css/.scss文件里添加。
感谢各位的阅读，以上就是“Angular中ngClass和ngStyle如何使用”的内容了，经过本文的学习后，相信大家对Angular中ngClass和ngStyle如何使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网