项目场景：前端开发中经常会遇到这样一种情况：不同的页面会共用同一段代码，同时我们要根据页面的具体信息或者某种操作（例如点击某个按钮）去决定是否展示这段代码或使页面样式做出一定的改变，这时就用到我们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文件里添加。
更多编程相关知识，请访问：编程入门！！
以上就是angular学习之详解样式绑定（ngclass和ngstyle）的使用的详细内容。