Angular航海日志 D3.内置指令

我们在上一篇《Angular航海日志 D2.初识TypeScript》中简单学习了TS。

要提醒的一点就是，项目中默认启用了JS格式检测，大家有时候可能发现多了个回车或者多了个空格都直接编译报错了，这时候只要把tslint.json文件中的所有true统一替换成false就行了，也就是我们统一关掉检测了。

还有一点得说明，这一系列是参考《Angular权威教程》经过实践来写的。原则上不针对0基础的朋友。大家还是先看看之前的文章吧。后面的内容讲解我不会再一点一点地解释，简单的一笔带过，大家有问题可以留言或加我微信聊。

接下来我们依然从简单的入手，一起看看ng常用的内置指令吧。

ngIf

用于控制元素是否加载。

要说的是曾经的ng-show在ng中没有对应的替代指令。

ngSwitch

不用多说你也明白，if多的时候会很繁杂。ng也同样提供了switch。

要注意的是，既然case的值是字符串，所以要加上单引号，要不然会程序会当成是变量来识别。

还有一点要说，ng中的case项可以重复，比如两个A，这样页面就会加载两个项的内容。

ngStyle

使用ngStyle指令可以设置CSS样式。有几种用法：

同样注意，普通值如果是字母就需要单引号区分。

当然，样式多了起来就比较烦了，所以我们可以这样：

要注意的是，如果出现了连字符 - ，就要加上单引号，因为js中是不允许出现 - 的：

显然如果指令不能绑定变量，那就都是扯淡：

ng还提供了一些有用的语法糖：

ngClass

同样的不用多说你也知道，style行内样式写多了很麻烦，所以我们更希望使用class。ng也提供了ngClass。我们可以动态改变DOM的class。

也是有几种用法，第一种：

注意，这种方式第二个值必须是个布尔值，我们可以这样显式设置。也可以绑定变量，通过绑定变量来修改。

当然了，我们知道class是可以有多个的：

这里也要说明，这个跟原生的class是不冲突的，会结合在一起：

ngFor

我们不管在vue还是angularjs中，都有循环绑定DOM的语法，这是很多同学非常喜欢的一个操作，显然ng也提供了，语法是这样的：

*ngFor="let item of items"

当然我们在第一章里面也知道可以绑定对象数组：

当然了，如果项目需要，还可以搞个嵌套数组，你懂的。

那如何使用索引呢：

ngNonBindable

最后我们说个有趣的问题，如果我就想在页面显示{{ test }}这样的普通文本怎么办呢？ng不会把她当成是模板语法绑定掉吗？那怎么解决呢？ng也想到了，提供了ngNonBindable指令：

最后我们来做一个综合的小案例：

在文本框输入样式参数来控制div显示：

代码很简单：

不多解释，ng第一篇有过类似的代码。

当点击设置按钮时，页面内容会根据我们输入的值来设置div内容的显示样式。

其实有心的同学可能已经发现了一点，在ng1或者vue的时候，我们都是双向绑定的，也就是说当文本框中的值改掉时，所有绑定了该变量的所有DOM就会自动更新，但今天的这个例子中显然不是这样。这就是ng2的一个显著区别，ng2开始采用和React一样的单向绑定，就是说表单修改数据之后，需要在顶层触发事件，然后向下流更新组件。而双向绑定在简单的项目中还好，一旦项目复杂起来每一次修改就会引起蝴蝶效应，可能有很多开发者无法预测的情况。

好了，关于内置指令我们暂时就学习这么多就够了，我们可以通过指令的组合来完成很多有用的应用啦。

看完如果觉得有帮助，可以转发一下的。