[NgClass] 

CSS 类会根据表达式求值结果进行更新,更新逻辑取决于结果的类型:

  • string - 会把列在字符串中的 CSS 类(空格分隔)添加进来,

  • Array - 会把数组中的各个元素作为 CSS 类添加进来,

  • Object - 每个 key 都是要处理的 CSS 类,当表达式求值为真的时候则添加,为假则移除。

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

//  如果 isShow=true,添加  first, second 这两个类, 移除 third 这个类
<some-element [ngClass]="{'first': isShow, 'second': isShow, 'third': !isShow}">...</some-element>
// <some-element [ngClass]="{isShow ? 'first':'second'}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element> // 如果 isShow=true,添加 class1, class2 , class3 <some-element [ngClass]="{'class1 class2 class3' : isShow}">...</some-element>

 [NgStyle]

[ngStyle] 可以通过指定用冒号分隔的键值对来设置一个或多个样式属性
<some-element [ngStyle]="objExp">...</some-element>
<some-element [ngStyle]="{cursor: 'pointer'}">...</some-element>

<some-element [ngStyle]="{marginBottom:'30px',background:'#F1F1F1',border:'1px #d9d9d9 solid'}">...</some-element>

// 动态添加样式
<some-element [ngStyle]="{backgroundColor:(item.leftColor)}">...</some-element> // 动态添加样式
<some-element [ngStyle]="{'left': (400 - node.level * 18) + 'px'}">...</some-element>

NgIf

通常使用指令的简写形式*ngIf=“condition”,作为插入模板的锚元素的属性提供。Angular将其扩展为更明确的版本,其中锚元素包含在<ng template>元素中。

// 如果condition 为true 则渲染

<div *ngIf="condition">Content to render when condition is true.</div>

<ng-template [ngIf]="condition"><div>Content to render when condition is
true.</div></ng-template> // 如果condition 为true 则渲染div, 否则渲染 elseBlock <div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template> // // 如果condition 为true 则渲染thenBlock , 否则渲染 elseBlock
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

[ngSwitch][ngSwitchCase]

当下一个匹配表达式与开关表达式匹配时添加或删除模板(显示或隐藏视图)的结构指令。

容器上的[ngSwitch]指令指定要与之匹配的表达式。要匹配的表达式由容器中视图的ngSwitchCase指令提供。

匹配的每个视图都会被渲染。

如果没有匹配项,则呈现具有ngSwitchDefault指令的视图。

在[NgSwitch]语句中,但在任何NgSwitchCase或ngSwitchDefault指令之外的元素都保留在该位置。

<container-element [ngSwitch]="switch_expression">
// 匹配时,显示相应的视窗
<some-element *ngSwitchCase="match_expression_1">...</some-element>
<some-element *ngSwitchCase="match_expression_2">...</some-element>
<some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
// 没有匹配项时的默认情况
<some-element *ngSwitchDefault>...</some-element>
</container-element>

angular [NgClass] [NgStyle],NgIf,[ngSwitch][ngSwitchCase]的更多相关文章

  1. Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle

    这几个都关于样式及类名修改的,所以先把样式代码贴上吧. .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个,下面进入正题. ngClass ngCla ...

  2. angular的路由跳转,的监听$rootScope.$on

    使用angular来做项目时,习惯性的使用第三方路由插件ui-router配置路由.每一个状态都对应着一个页面, 因此对路由状态改变的监听也变的十分重要. 可以使用:$rootScope.$on(…… ...

  3. angularjs ng-if妙用,ng-if解决父子组件异步传值

     壹 ❀ 引 angularjs开发中,组件件相互通信传值是再普遍不过的操作了,比如我在父作用域中获取了一个数据,想要传递给子组件使用,做简单的做法就是通过scope传递,比如这样: <body ...

  4. angular源码分析:angular中各种常用函数,比较省代码的各种小技巧

    angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angu ...

  5. angular核心$watch,$digest,$apply之间的联系

    浏览器事件发生时,会在浏览器的上下文window中执行,而angular有自己的上下文angular content,angular 事件在自己的上下文angular content中执行. $wat ...

  6. React 和 Angular 各有什么优缺点,各自又适合什么开发场景?

    最近正在学习React,便谈一点自己的浅见. Angular.js首先Angular的背后是Google,所以社区基础是不用担心的,整个生态也已经是非常的完整了,从最基本的Tutorial到Stack ...

  7. vue,react,angular

    一.Vue.js:     其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库.     Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组 ...

  8. AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch

    在Angular的原生指令中有这几个指令用来控制元素的展示与否,ng-show/ng-hide/ng-if和ng-switch. 在angular性能优化中,我们也常常会用到它. 我们看下他们的区别. ...

  9. NgStyle和NgIf控制HTML标签显示的区别

    通常web开发者会选择将元素样式属性display设为none来隐藏目标元素.采用这种方式,这些元素虽然不可见却仍然保存在DOM中,这样带来的好处是,如果元素不久就需要再次显示,组件不需要重新被初始化 ...

随机推荐

  1. SQL SERVER 2008 设置字段默认值为当前时间

    在某些情况下需要对某条记录添加上时间戳,比如用户注册,需要记录用户的注册时间,在SQL SERVER 2008中可以通过 1. 添加新字段 2. 数据类型设置为smalldatetime 3. 默认值 ...

  2. linux运维、架构之路-K8s通过Service访问Pod

    一.通过Service访问Pod 每个Pod都有自己的IP地址,当Controller用新的Pod替换发生故障的Pod时,新Pod会分配到新的IP地址,例如:有一组Pod对外提供HTTP服务,它们的I ...

  3. java8 base64编码和解码

    package com.oy; import java.nio.charset.StandardCharsets; import java.util.Base64; import org.junit. ...

  4. C# 输出双引号

    Response.Write("前一页面的标题是:\"" +Page.PreviousPage.Title.ToString()+"\"") ...

  5. Codeforces 622F The Sum of the k-th Powers ( 自然数幂和、拉格朗日插值法 )

    题目链接 题意 : 就是让你求个自然数幂和.最高次可达 1e6 .求和上限是 1e9 分析 :  题目给出了最高次 k = 1.2.3 时候的自然数幂和求和公式 可以发现求和公式的最高次都是 k+1 ...

  6. hdu 3572 仪器与任务 最大流 好题 体会建图思想

    Task Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  7. 【BZOJ4456】 [Zjoi2016]旅行者 / 【UOJ #184】 【ZJOI2016】旅行者

    Description 小Y来到了一个新的城市旅行.她发现了这个城市的布局是网格状的,也就是有n条从东到西的道路和m条从南到北 的道路,这些道路两两相交形成n×m个路口 (i,j)(1≤i≤n,1≤j ...

  8. 彩色图像--色彩空间 CMY(K)空间

    学习DIP第63天 转载请标明本文出处:***http://blog.csdn.net/tonyshengtan ***,出于尊重文章作者的劳动,转载请标明出处!文章代码已托管,欢迎共同开发:http ...

  9. Unity3D_(游戏)卡牌03_选关界面

      启动屏界面.主菜单界面.选关界面.游戏界面 卡牌01_启动屏界面 传送门 卡牌02_主菜单界面 传送门 卡牌03_选关界面 传送门 卡牌04_游戏界面    传送门 选关界面效果 (鼠标放在不同关 ...

  10. 论文阅读Graph Convolutional Matrix Completion

    摘要:我们从链路预测的视角考虑推荐系统的matrix completion.像电影评分的交互数据可以表示为一个user-item的二分图,其中的edge表示观测到的评分.这种表示是特别有用的在额外的基 ...