• 技术文章 >web前端 >js教程

    详解angular中为HTML元素添加css类的几种方式

    青灯夜游青灯夜游2021-05-17 10:57:26转载527
    本篇文章给大家介绍一下angular中为HTML元素添加css类的几种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    主要是探索为 Angular 中的 HTML 元素动态的添加类的几种实现,包括 className 指令的使用,NgClass 的使用等。 【相关推荐:《angular教程》】

    原生 JavaScript 为元素添加一个类

    主要代码是:

    let element = document.getElementById('exampleTarget');
    
    element.className = 'additional-class'

    更具体的解释在 className 的用法 ,这里不在赘述。

    使用 [className] 属性绑定在 Angular 中添加 css 类

    可以简单的使用 className 为我们的 HTML element 绑定类:

    <div [className]="'example-class'">
    
    </div>

    当然使用此属性绑定静态类并无太大的意义,我们可以根据条件绑定相关的类:

    <div [className]="condition ? 'condition-true-example-class': 'false-example-class'">
    
    </div>

    conditiontrue 的时候,会添加 condition-true-example-class 类,为 false 的时候会添加 false-example-class 类。

    同样,我们还可以写入其他的简单的判别:

    <div [className]="'example-class' + variableValue">
    
    </div>

    基于条件切换 css 的类

    当基于某些条件切换 css 的类的时候,上述的方式就稍显繁琐:

    <div [className]="condition ? 'condition-true-example':''">
    
    </div>

    既不美观也不太好理解。

    我们可以使用:

    <div [class.example-class]="condition">
    
    </div>

    来实现上述的需求。

    更好的使用 ngClass 指令

    上述的所有添加类的方式,都可以使用 ngClass 来替代。

    该指令只是语法糖,可以是代码看起来更加简洁明了。

    像我们使用 ngClass 指令来完成上面的两个示例:

    <!-- 替代 className 属性绑定 -->
    <div [ngClass]="{
        'condition-true-example-class': condition,
        'false-example-class': !condition
    }">
      
    </div>
    
    <!-- 替代基于条件切换 class -->
    <div [ngClass]="{'example-class': condition}">
      
    </div>

    除了上述的方式, ngClass 还有一些其他的常用方式:

    <!-- 添加单个类 -->
    <div [ngClass]="'example-class'">
      
    </div>
    
    <!-- 添加多个类 -->
    <div [ngClass]="['example-class','example-class-2']">
      
    </div>

    更多使用方式请查看: 官方文档

    需要注意的是:

    如果在组件的 ts 文件中使用 HostBinding 添加了多个类:

    export class AppExampleComponent implements OnInit {
      @HostBinding('class') className = 'example-basic-class cursor-pointer d-inline-flex align-items-center';
      // ...
    }

    那么在使用的时候,则不能在通过 classclassNamengClass ,添加类。

    更多编程相关知识,请访问:编程入门!!

    以上就是详解angular中为HTML元素添加css类的几种方式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:angular html css
    上一篇:nodejs设置NODE_ENV时发生错误怎么解决? 下一篇:javascript和java区别有什么
    线上培训班

    相关文章推荐

    • 前端框架之争:除了Vue、Angular和React还有谁与之争锋?• 详解Angular中组件间通讯的几种方法• 2021年值得尝试的7个Angular前端组件库,快来收藏吧!• Angular如何创建服务?5种方式了解一下!• 浅谈Angular中导入本地JSON文件的方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网