阅读量:2
你好，大家好，我是技术宅小伙。在前面的文章中，我们简单介绍了如何组建输入和输出这两个特性。今天我们将在这个基础上介绍两个最常用的指令。指令是Angular里面另一个重要的概念，后面我们会单独讲指令。但是今天我们只是简单介绍一下这两个常用指令的用法。
最常用的第一个指令就是ng-if。ng-if的作用是根据传入的条件来决定一个区域的渲染。当结果为true的时候就会渲染所在的区域，结果为false的时候就不渲染。下面我们通过一个简单的例子来演示一下ng-if的用法。
我们继续用"First App"这个应用来演示。我们这里要模拟一个toggle的组件，通过一个按钮来控制区域的显示和隐藏。首先我们需要创建一个display变量，它的默认值是不显示。然后，我们在ng-if里面根据这个变量来控制它是否要显示或隐藏。我们再加一个按钮来控制display变量的值。这个按钮的作用就是把display变成它的反值。这样，当display为true的时候，这块区域就会显示；当display为false的时候，这块区域就会隐藏。这个就是ng-if的一个最基本的用法。
最常用的第二个指令就是ng-for。它的作用是基于一个数组类型去在组件上做一个循环。最常用的就是渲染一个list或者渲染一个表格table之类的。下面我们就去演示一下ng-for最基本的用法。
首先我们在TS文件里面定义一个数组items，长度为100，每个元素都有一个label，它的值是items加上它的索引。然后，我们在HTML里面使用ng-for来遍历这个数组，只展示其中的偶数。这里要注意的是ng-if和ng-for这两个不能出现在同一个tag上面。我们需要在li上面加一层元素，然后在ng-for里面加一个变量来获取当前item的索引，然后我们在这里判断就是如果这个索引是偶数的话，我们就去展示这个item。这个就是ng-for的一个最基本的用法。
另外一个要注意的就是ng-container这个指令。它的作用就是可以参与使用ng-for或者ng-if这些指令，但是它不参与渲染。这个在样式层级结构的时候非常有用。ng-container是可以嵌套使用的，可以方便地控制样式的层级结构。
以上就是ng-if、ng-for和ng-container的一个最基本用法。另外，要注意ng-if和ng-for不能在同一个元素上使用。其他的指令也有类似的限制。后面我们遇到其他指令的时候再去讲解。感谢大家的收看！ 好的，现在让我们来看一下如何使用管道。管道是Angular中非常强大的一个特性，它可以把数据按照一定的格式进行转换，比如格式化日期、货币等。管道的使用非常简单，只需要在HTML里面使用竖线符号（|）来连接管道的名字和参数即可。下面我们来演示一下管道的使用。
首先我们在TS文件里面定义一个日期类型的变量today，它的值是当前的日期。然后，我们在HTML里面使用date管道来格式化这个日期。date管道可以接收一个参数，用来指定日期的格式。这个格式可以是预定义的，也可以是自定义的。我们在这里使用了一个预定义的日期格式。这个例子中，我们只是展示了一个非常简单的使用方法，实际上，管道的功能非常强大，我们可以通过自定义管道来实现更加复杂的转换功能。
另外一个要注意的就是管道也是可以串联使用的，比如我们可以先使用uppercase管道把字符串转换成大写，然后再使用slice管道来截取一部分字符串。这个就是管道的串联使用。使用管道可以大大提高代码的可读性和可维护性，因为它可以把数据格式化的工作从业务逻辑中分离出来。
以上就是管道的一个最基本的用法。管道还有很多其他的功能和用法，后面我们遇到其他特性的时候再去讲解。感谢大家的收看！ 你好，大家好，我是技术宅小伙。在前面的文章中，我们简单介绍了如何组建输入和输出这两个特性。今天我们将在这个基础上介绍两个最常用的指令。指令是Angular里面另一个重要的概念，后面我们会单独讲指令。但是今天我们只是简单介绍一下这两个常用指令的用法。
最常用的第一个指令就是ng-if。ng-if的作用是根据传入的条件来决定一个区域的渲染。当结果为true的时候就会渲染所在的区域，结果为false的时候就不渲染。下面我们通过一个简单的例子来演示一下ng-if的用法。
我们继续用"First App"这个应用来演示。我们这里要模拟一个toggle的组件，通过一个按钮来控制区域的显示和隐藏。首先我们需要创建一个display变量，它的默认值是不显示。然后，我们在ng-if里面根据这个变量来控制它是否要显示或隐藏。我们再加一个按钮来控制display变量的值。这个按钮的作用就是把display变成它的反值。这样，当display为true的时候，这块区域就会显示；当display为false的时候，这块区域就会隐藏。这个就是ng-if的一个最基本的用法。
最常用的第二个指令就是ng-for。它的作用是基于一个数组类型去在组件上做一个循环。最常用的就是渲染一个list或者渲染一个表格table之类的。下面我们就去演示一下ng-for最基本的用法。
首先我们在TS文件里面定义一个数组items，长度为100，每个元素都有一个label，它的值是items加上它的索引。然后，我们在HTML里面使用ng-for来遍历这个数组，只展示其中的偶数。这里要注意的是ng-if和ng-for这两个不能出现在同一个tag上面。我们需要在li上面加一层元素，然后在ng-for里面加一个变量来获取当前item的索引，然后我们在这里判断就是如果这个索引是偶数的话，我们就去展示这个item。这个就是ng-for的一个最基本的用法。
另外一个要注意的就是ng-container这个指令。它的作用就是可以参与使用ng-for或者ng-if这些指令，但是它不参与渲染。这个在样式层级结构的时候非常有用。ng-container是可以嵌套使用的，可以方便地控制样式的层级结构。
以上就是ng-if、ng-for和ng-container的一个最基本用法。另外，要注意ng-if和ng-for不能在同一个元素上使用。其他的指令也有类似的限制。后面我们遇到其他指令的时候再去讲解。感谢大家的收看！
好的，现在让我们来看一下如何使用管道。管道是Angular中非常强大的一个特性，它可以把数据按照一定的格式进行转换，比如格式化日期、货币等。管道的使用非常简单，只需要在HTML里面使用竖线符号（|）来连接管道的名字和参数即可。下面我们来演示一下管道的使用。
首先我们在TS文件里面定义一个日期类型的变量today，它的值是当前的日期。然后，我们在HTML里面使用date管道来格式化这个日期。date管道可以接收一个参数，用来指定日期的格式。这个格式可以是预定义的，也可以是自定义的。我们在这里使用了一个预定义的日期格式。这个例子中，我们只是展示了一个非常简单的使用方法，实际上，管道的功能非常强大，我们可以通过自定义管道来实现更加复杂的转换功能。
另外一个要注意的就是管道也是可以串联使用的，比如我们可以先使用uppercase管道把字符串转换成大写，然后再使用slice管道来截取一部分字符串。这个就是管道的串联使用。使用管道可以大大提高代码的可读性和可维护性，因为它可以把数据格式化的工作从业务逻辑中分离出来。
以上就是管道的一个最基本的用法。管道还有很多其他的功能和用法，后面我们遇到其他特性的时候再去讲解。感谢大家的收看！
