Angular4 中内置指令的基本用法
前言
大家都知道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，我实际开发中一次没用过，也是查着资料测试一遍写下来的。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持
相关推荐
-
Angular4 中常用的指令入门总结
前言 本文主要给大家介绍了关于Angular4 常用指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: NgIf <div *ngIf="false"></div> <!-- never displayed --> <div *ngIf="a > b"></div> <!-- displayed if a is more than b --> <div *ngIf=&
-
Web前端框架Angular4.0.0 正式版发布
前言 angular4.0.0正式版现在可以使用了.这是自我们宣布angular改版后,首次发布的专业版本.它向下兼容,支持所有使用了angular2.x.x版本的应用程序. 我们很高兴和大家分享这个版本,它包括最近的3个月中我们做的功能上的主要改进.我们努力让开发者们能够很容易的接受angular4.0.0. 新版本的特性 •更轻量化.更快 在这个新版本上,我们履行了我们的承诺,我们做到了让Angular的程序变的更轻量化,更快.但是我们还没有完全的优化完,在接下来的日子中,你会看到我们将着重
-
angular学习之从零搭建一个angular4.0项目
话说现在angular更新迭代太快了,从前几年用angular版本去搭建项目时还是1.x版本,到现在都已经是angular4.0了(直接跳过了3.0),由于公司要求用到angular4.0,所以就不能只是了解一下了,谁让我那么热爱学习了(咳咳!此处有一个推眼镜的动作),废话不多说,直接上手,首先用到的工具会有angular4.0.angular-cli.npm(v3.10.8).node(v6.2.0) 上述node和npm包管理器版本是我本机的版本号,这个版本不要太低应该都没问题 angula
-
Angular 4中如何显示内容的CSS样式示例代码
前言 在开始本文的正文之前,我们先来看一下angular2中将带标签的文本输出在页面上的相关内容,为了系统性的防范XSS问题,Angular默认把所有值都当做不可信任的. 当值从模板中以属性(Property).DOM元素属性(Attribte).CSS类绑定或插值表达式等途径插入到DOM中的时候, Angular将对这些值进行无害化处理(Sanitize),对不可信的值进行编码. h3>Binding innerHTML</h3> <p>Bound value:</p
-
Angular4学习笔记之新建项目的方法
Angular4我自己还在摸索学习中,这个系列中的笔记会不定期修改和更新-- 一.安装nodejs(下面方式 二选一,个人推荐第二种) 1.nodejs官网下载安装 2.使用nvm安装管理(具体方式参照我的另一篇) 二.全局安装angular-cli npm install -g @angular/cli 三.进入一个存放项目的文件夹,运行以下代码,初始化项目 ng new <项目名> 四.启动项目 cd <项目名> npm install ng serve 附: 1.引入jQue
-
Angular2平滑升级到Angular4的步骤详解
前言 Angular4终于在两天前发布了正式版本,那么怎么升级呢?其实Angular2和Angular4之间属于平滑过渡,并不像1和2之间颠覆性的重写代码. Angular4现已发布 http://www.jb51.net/article/109685.htm 为什么跳过Angular 3? 根据Angular团队首席开发Igor Minar的说法:随着Angular 2的发布,Angular团队引入了语义化版本控制规范,即:将语义化版本用三组数字来表示,按照major.minor.patch
-
Angular4 中内置指令的基本用法
前言 大家都知道ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素标签更加实例化. 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简单的描述,让你在更快更准确地学会每一种内置指令的基本用法. ngFor 作用:像 for 循环一样,可以重复的从数组中取值并显示出来. 例子: // .ts this.userInfo = ['张三', '李四', '王五']; // .html <div class
-
javascript中内置对象Math的介绍及用法案例
目录 前言 Math概述 Math中常用函数的用法 1.绝对值方法 2.三个取整方法 3.求最大值/最小值 4.随机数 结语 前言 今天总结一下javascript 内置对象Math中的函数用法,顺带写一下常见的案例. Math概述 Math 对象不是构造函数,它具有数学常数和函数的属性和方法.跟数学相关的运算(求绝对值,取整.最大值等)可以使用 Math 中的成员. Math中常用函数的用法 Math.PI //圆周率Math.floor () //向下取整Math.ceil () //向上取
-
Python编程中内置的NotImplemented类型的用法
目录 一.NotImplemented它是什么? 二.它有什么用?什么时候用? 一.NotImplemented它是什么? >>> type(NotImplemented) <type 'NotImplementedType'> NotImplemented 是Python在内置命名空间中的六个常数之一.其他有False.True.None.Ellipsis 和 debug.和 Ellipsis很像,[NotImplemented] 能被重新赋值(覆盖).对它赋值,甚至改变属
-
vue内置指令详解
指令 (Directives) 是带有 v- 前缀的特殊属性, 职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title 等等 主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url" rel="external nofollow" rel="external n
-
AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突. 首先从一些常见的内置指令开始. 先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.
-
Angular2内置指令NgFor和NgIf详解
在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的TypeScript所以在看下面的内容之前你最好可以看一下TypeScript或者ES6的类,它们的网址分
-
thinkPHP内置字符串截取函数用法详解
本文实例讲述了thinkPHP内置字符串截取函数用法.分享给大家供大家参考,具体如下: thinkphp内置了一个可以媲美smarty的模板引擎,给我们带来了很大的方便.调用函数也一样,可以和smarty一样调用自己需要的函数,而官方也内置了一些常用的函数供大家调用. 比如今天我们说的截取字符串函数,在thinkphp模板引擎里可以这样写:{$vo.title|msubstr=0,5,'utf-8′,false} 至于{$vo.title}这个大家肯定不陌生了.就说说后边的函数msubstr吧.
-
PHP模板引擎Smarty内置变量调解器用法详解
本文实例讲述了PHP模板引擎Smarty内置变量调解器用法.分享给大家供大家参考,具体如下: Smarty 中的变量调解器相当于函数,其调用方式为:通过 "|" 后面直接跟调解器函数名,如果有参数,得加在 ":" 后面,多个参数的话,累加即可. 下面为您介绍 Smarty 中内置的变量调解器: 1.capitalize 将变量里的所有单词首字大写.参数值 boolean 型决定带数字的单词,首字是否大写.默认不大写 index.php $tpl->assign
-
Python字符串内置函数功能与用法总结
本文实例讲述了Python字符串内置函数功能与用法.分享给大家供大家参考,具体如下: 字符串内置总结 需要注意的是: 字符串的单引号和双引号都无法取消特殊字符的含义,如果想让引号内所有字符均取消特殊意义,在引号前面加r,如name＝r'l\thf' unicode字符串与r连用必需在r前面,如name＝ur'l\thf' 大小写处理 函数 作用 示例 输出 capitalize 首字母大写,其余小写 'lk with psr'.capitalize() 'Lk with psr' upper 全
-
对Django中内置的User模型实例详解
User模型 User模型是这个框架的核心部分.他的完整的路径是在django.contrib.auth.models.User. 字段 内置的User模型拥有以下的字段: 1.username: 用户名.150个字符以内.可以包含数字和英文字符,以及_.@.+..和-字符.不能为空,且必须唯一! 2.first_name:歪果仁的first_name,在30个字符以内.可以为空. 3.last_name:歪果仁的last_name,在150个字符以内.可以为空. 4.email:邮箱.可以为空