1.[ngStyle]<any [ngStyle]=“obj”>说明：any代表样式绑定的标签类型可以是任何类型，比如是div,p,span等等都行。在这里插入代码片ngStyle绑定的值必须是一个对象。对象属性就是CSS样式名
1.[ngStyle]
<any [ngStyle]=“obj”>说明：
简单用法（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”>说明：
简单用法（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）的使用的详细内容，更多请关注编程网其它相关文章！
--结束END--
本文标题: Angular学习之详解样式绑定（ngClass和ngStyle）的使用
本文链接: https://www.lsjlt.com/news/205804.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0