Angular4 中内置指令的基本用法
前言
大家都知道ng内置了许多自定义的指令,这避免了我们自己去造轮子。同时,ng也提供了自定义指令的功能,可以让我们的页面元素标签更加实例化。
在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示。尽量用最少最简单的描述,让你在更快更准确地学会每一种内置指令的基本用法。
ngFor
作用:像for循环一样,可以重复的从数组中取值并显示出来。
例子:
//.ts
this.userInfo=['张三','李四','王五'];
//.html
{{username}}
讲解:
他的语法是*ngFor="letusernameofuserInfo",其中userInfo是从中取值的数组,username是每次从中取出来的值。然后在这个标签里面的内容就会重复执行,并通过双向绑定,将username显示出来。
ngIf
作用:根据条件决定是否显示或隐藏这个元素。
例子:
//.html
b">
讲解:
- 永远不会显示
- 当a大于b的时候显示
- 当username等于张三的时候显示
- 根据myFunction()这个函数的返回值,决定是否显示
ngSwitch
作用:防止条件复杂的情况导致过多的使用ngIf。
例子:
//.html
age=10
age=20
age=18
讲解:
[ngSwitch]先与目标进行绑定,ngSwitchCase列出每个可能性,ngSwitchDefault列出默认值。
ngStyle
作用:可以使用动态值给特定的DOM元素设定CSS属性。
例子:
//.ts
backColor:string='red';
//.html
你好,世界
你好,世界
你好,世界
你好,世界
讲解:
- 直接设置颜色为yellow。
- 设置背景颜色为backColor,并可以在.ts文件中对backColor的值进行修改。
- 设置字体大小,需要注意的是只写font-size会报错,必须在后面加上.px。当然.em.%都是可以的。
- 前三种都是只设置一个,写[ngStyle]可以同时写多个,使用花括号包住里面的内功。需要注意的是连字符-是不允许出现在对象的键名当中的,如果使用background-color等时需要加上单引号。
ngClass
作用:动态地设置和改变一个给定DOM元素的CSS类。
例子:
//.scss
.bordered{
border:1pxdashedblack;
background-color:#eee;
}
//.ts
isBordered:boolean=true;
//.html
是否显示边框
讲解:
- scss中设置了样式,相当于你建了一个class="bordered"。
- ts中新建了一个isBordered,用于判断是否显示.scss中的样式。
- html中用isBordered作为bordered是否显示的判断依据。
ngNonBindable
作用:告诉Angular不要绑定页面的某个部分。
例子:
.html
{{我不会被绑定}}
日常开发中,用ngFor和ngIf应该是最多的了,所以把他们两个写在了前面。至于ngNonBindable,我实际开发中一次没用过,也是查着资料测试一遍写下来的。