angular动态样式

菜蜗牛很菜

已于 2023-08-16 17:35:49 修改

阅读量2.5k

点赞数

分类专栏： AngularJS 文章标签： angular 前端 css

于 2021-06-02 10:58:00 首次发布

本文链接：https://blog.csdn.net/weixin_45010894/article/details/117462791

版权

AngularJS 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

文章目录

ngStyle
ngclass
类绑定class.active
ngIf

ngStyle

在Angular中，ngStyle是一个内置指令，用于动态设置元素的样式。它允许你基于组件中的属性或表达式来动态计算和应用CSS样式。

以下是有关ngStyle的一些要点：

基本使用：
你可以将ngStyle指令应用于一个元素，并将一个对象作为值传递给它。对象中的键是CSS属性，值是要应用的样式值。

例如，假设你有一个组件属性backgroundColor，你可以像这样使用ngStyle：

<div [ngStyle]="{ 'background-color': backgroundColor }">动态背景颜色</div>

在上述示例中，backgroundColor属性的值将被动态地应用为div元素的背景颜色。

使用表达式：
除了直接使用组件属性，你还可以在ngStyle中使用表达式来动态计算样式。

例如，假设你有一个组件属性isActive，你可以通过表达式来决定是否应用特定的样式：

<div [ngStyle]="{ 'background-color': isActive ? 'green' : 'red' }">根据状态应用样式</div>

在上述示例中，如果isActive为真，将应用绿色背景颜色；否则，将应用红色背景颜色。

多个样式：
ngStyle也支持应用多个样式。你可以在对象中添加多个键值对来设置不同的样式属性。

例如：

<div [ngStyle]="{ 'font-size.px': fontSize, 'color': fontColor }">根据属性设置不同样式</div>

在上述示例中，fontSize和fontColor是组件属性，分别控制字体大小和字体颜色。

ngStyle指令使你能够在Angular中轻松地动态设置元素的样式。你可以根据组件属性或表达式来计算和应用样式，实现灵活的样式控制。

ngclass

遍历后台数据，根据不同的状态【已执行，执行中，未执行】显示不同的颜色背景
该功能用到angular的ngClass
用法

[ngClass]="{'动态添加的属性名':判断条件,多个条件用逗号分隔}" >
如：
[ngClass]="{' layui-btn-danger':item.status==='未执行','layui-btn-warm':item.status==='执行中',' layui-btn-normal ':item.status==='已执行'}" >

代码

   <div style="padding: 10px" overflow="hidden" >
          <div *ngIf="makingPlanData!=null">
            <div *ngFor="let item of makingPlanData;let index = index" style="float: left">
              <div style="float: left">
                <div>{{item.name}}</div>
                <div>{{item.date}}</div>
              </div>
              <div style="float: right" class="layui-btn layui-btn-radius  oval"  [ngClass]="{' layui-btn-danger':item.status==='未执行','layui-btn-warm':item.status==='执行中',' layui-btn-normal ':item.status==='已执行'}" ><div class="stutus">{{item.status}}</div></div>
              <hr style="width: 280px;">

            </div>

          </div>

类绑定class.active

类绑定：
类绑定允许你根据条件为元素添加或移除CSS类。你可以使用方括号语法将一个属性与一个布尔表达式绑定在一起。如果表达式的值为真，则添加对应的CSS类；如果值为假，则移除对应的CSS类。

例如，假设你有一个属性isActive，当它为真时，你想给一个元素添加一个名为active的CSS类，你可以这样写：

<div [class.active]="isActive">Some content</div>

在上面的例子中，当isActive为真时，会为div元素添加active类。

例：
选中后变颜色


<ul>
  <li *ngFor="let menu of menus;let i = index">
    <!-- 使用双花括号表达式 -->
    <a href="#"
       [class.active]="i === selectedIndex"
       (click)="selectedIndex = i"
    >{{ menu.title }}</a>
  </li>
</ul>


.active{
  color:red;
}
 selectedIndex = -1;

ngIf

在Angular中，ngIf是一个内置指令，用于根据条件在模板中渲染或销毁一个元素。ngIf else结合了ngIf指令和ng-template语法，可以让我们在条件不满足时显示备用内容。

以下是有关ngIf else的一些要点：

ngIf的基本使用：
使用ngIf指令时，你需要将它应用于一个元素或一个容器元素，并将一个条件表达式作为值传递给它。只有当条件为真时，该元素才会被渲染到DOM中。

例如，假设你有一个布尔变量showElement，你可以像这样使用ngIf：

<div *ngIf="showElement">显示该元素</div>

在上面的例子中，如果showElement为true，则div元素会被渲染到DOM中。

ngIf else的使用：
ngIf else允许你在条件不满足时显示备用内容。要使用ngIf else，你需要定义一个使用ng-template指令的模板，并使用else关键字来为它定义一个名称。

例如，假设你有一个备用内容，你可以这样使用ngIf else：

<div *ngIf="showElement; else alternateContent">显示该元素</div>
<ng-template #alternateContent>备用内容</ng-template>

在上面的例子中，如果showElement为true，则

元素会被渲染到DOM中。否则，alternateContent模板中的内容会被渲染。

多个else分支：
如果你需要在条件不满足时显示多个备选内容，你可以使用多个ng-template来定义它们，并通过*ngIf指令的条件表达式和else关键字进行关联。只有与条件匹配的ng-template会被渲染。

例如：

<div *ngIf="condition; then firstTemplate else secondTemplate"></div>

<ng-template #firstTemplate>第一个备选内容</ng-template>
<ng-template #secondTemplate>第二个备选内容</ng-template>

在上面的例子中，如果condition为true，则firstTemplate中的内容会被渲染；否则，secondTemplate中的内容会被渲染。

使用ngIf else能够根据条件灵活地在模板中显示不同的内容。它在处理条件渲染时非常实用。

例：
选中后变色

<ul>
  <li *ngFor="let menu of menus;let i = index">
    <!-- 使用双花括号表达式 -->
    <a href="#"
       [class.active]="i === selectedIndex"
       (click)="selectedIndex = i"
    >{{ menu.title }}</a>
    <span class="indicator" *ngIf="i === selectedIndex"></span>
  </li>
</ul>

ul{
  padding: 0;
  margin: 0;
  padding: 0;
  display: flex;
  /* 将屏幕剩余空间平均分布于各子元素之间 */
  justify-content: space-between;
}
ul li {
  /* 去掉列表的 bullet */
  /*display: inline-block;*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
  /* 内容不折行显示 */
  white-space: nowrap;
}


a{
  text-decoration: none;
}

/* 不显示滚动条，只对基于 Webkit 内核的浏览器有效 */
::-webkit-scrollbar {
  display: none;
}


.active{
  color:red;
}
.indicator{
  background-color: brown;
  height: 2px;
  width: 2rem;
  margin-top: 2px;
}