Angular学习之详解样式绑定（ngClass和ngStyle）的使用-编程学习网

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）的使用的详细内容，更多请关注编程网其它相关文章！