Angular4 中内置指令的基本用法


Posted in Javascript onJuly 31, 2017

前言

大家都知道ng内置了许多自定义的指令,这避免了我们自己去造轮子。同时,ng也提供了自定义指令的功能,可以让我们的页面元素标签更加实例化。

在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示。尽量用最少最简单的描述,让你在更快更准确地学会每一种内置指令的基本用法。

ngFor

作用:像 for 循环一样,可以重复的从数组中取值并显示出来。

例子:

// .ts

this.userInfo = ['张三', '李四', '王五'];

// .html

<div class="ui list" *ngFor="let username of userInfo">
 <div class="item">{{username}}</div>
</div>

讲解:

他的语法是 *ngFor="let username of userInfo" ,其中 userInfo 是从中取值的数组,username 是每次从中取出来的值。然后在这个标签里面的内容就会重复执行,并通过双向绑定,将 username 显示出来。

ngIf

作用:根据条件决定是否显示或隐藏这个元素。

例子:

// .html

<div *ngIf="false"></div>
<div *ngIf="a > b"></div>
<div *ngIf="username == '张三'"></div>
<div *ngIf="myFunction()"></div>

讲解:

  • 永远不会显示
  • 当 a 大于 b 的时候显示
  • 当 username 等于 张三 的时候显示
  • 根据 myFunction() 这个函数的返回值,决定是否显示

ngSwitch

作用:防止条件复杂的情况导致过多的使用 ngIf。

例子:

// .html

<div class="container" [ngSwitch]="myAge">
 <div *ngSwitchCase="'10'">age = 10</div>
 <div *ngSwitchCase="'20'">age = 20</div>
 <div *ngSwitchDefault="'18'">age = 18</div>
</div>

讲解:

[ngSwitch] 先与目标进行绑定,ngSwitchCase 列出每个可能性,ngSwitchDefault 列出默认值。

ngStyle

作用:可以使用动态值给特定的 DOM 元素设定 CSS 属性。

例子:

// .ts
backColor: string = 'red';

// .html
<div [style.color]="yellow">
 你好,世界
</div>
<div [style.background-color]="backColor">
 你好,世界
</div>
<div [style.font-size.px]="20">
 你好,世界
</div>
<div [ngStyle]="{color: 'white', 'background-color': 'blue', 'font-size.px': '20'}">
 你好,世界
</div>

讲解:

  • 直接设置颜色为 yellow。
  • 设置背景颜色为 backColor,并可以在 .ts 文件中对 backColor 的值进行修改。
  • 设置字体大小,需要注意的是 只写 font-size 会报错,必须在后面加上 .px。当然 .em .% 都是可以的。
  • 前三种都是只设置一个,写 [ngStyle] 可以同时写多个,使用花括号包住里面的内功。需要注意的是连字符 - 是不允许出现在对象的键名当中的,如果使用 background-color 等时需要加上单引号。

ngClass

作用:动态地设置和改变一个给定 DOM 元素的 CSS类。

例子:

// .scss
.bordered {
 border: 1px dashed black;
 background-color: #eee;
}

// .ts
isBordered: boolean = true;
 
// .html
<div [ngClass]="{bordered: isBordered}">
 是否显示边框
</div>

讲解:

  • scss 中设置了样式,相当于你建了一个 class="bordered"
  • ts 中新建了一个 isBordered,用于判断是否显示 .scss 中的样式。
  • html 中用 isBordered 作为 bordered 是否显示 的判断依据。

ngNonBindable

作用:告诉 Angular 不要绑定页面的某个部分。

例子:

.html

<div ngNonBindable>
 {{我不会被绑定}}
</div>

讲解:

使用了 ngNonBindable ,花括号就会被当做字符串一起显示出来。

总结

日常开发中,用 ngFor 和 ngIf 应该是最多的了,所以把他们两个写在了前面。至于 ngNonBindable,我实际开发中一次没用过,也是查着资料测试一遍写下来的。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持

Javascript 相关文章推荐
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
浅析JavaScript动画
Jun 10 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 #Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 #Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 #Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 #Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 #Javascript
Kindeditor单独调用多图上传实例
Jul 31 #Javascript
老生常谈ES6中的类
Jul 31 #Javascript
You might like
php数组添加元素方法小结
2014/12/20 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
vant中的toast轻提示实现代码
2020/11/04 Javascript
python对字典进行排序实例
2014/09/25 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
简述 Python 的类和对象
2020/08/21 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
查询优化的一般准则有哪些
2015/03/08 面试题
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
计生个人工作总结
2015/02/28 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书