介绍
Angular Common 是一个 Angular 官方提供的用于增强开发效率的库。它提供了一些常用的组件、指令、管道等，使得我们能够更加便捷地开发 Angular 应用。
本文将介绍 Angular Common 库的使用方法，包括如何安装、如何使用其中的组件、指令、管道等，并提供示例代码供读者参考。
安装
在使用 Angular Common 库之前，我们需要先安装它。我们可以通过以下命令来安装：
npm install @angular/common
安装完成后，我们就可以在项目中使用 Angular Common 库了。
组件
Angular Common 库提供了一些常用的组件，例如 NgIf、NgFor、NgSwitch 等。这些组件可以帮助我们更加便捷地实现一些常见的功能。
NgIf
NgIf 组件可以根据一个表达式的值来决定是否显示某个元素。它的使用方法如下：
<div *ngIf="condition">This div is displayed when condition is true.</div>
其中，condition 是一个表达式，如果它的值为 true，则该 div 元素会被显示出来。
NgFor
NgFor 组件可以根据一个数组的元素来生成一组元素。它的使用方法如下：
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>其中，items 是一个数组，*ngFor 指令会根据数组的元素生成一组 li 元素，每个 li 元素的内容都是数组元素的值。
NgSwitch
NgSwitch 组件可以根据一个表达式的值来切换多个元素的显示状态。它的使用方法如下：
<div [ngSwitch]="condition"> <div *ngSwitchCase="'case1'">This div is displayed when condition is 'case1'.</div> <div *ngSwitchCase="'case2'">This div is displayed when condition is 'case2'.</div> <div *ngSwitchDefault>This div is displayed when condition is neither 'case1' nor 'case2'.</div> </div>
其中，condition 是一个表达式，*ngSwitchCase 指令会根据表达式的值来切换对应的 div 元素的显示状态。如果表达式的值与任何一个 *ngSwitchCase 的值都不匹配，则会显示 *ngSwitchDefault 指令所对应的 div 元素。
指令
Angular Common 库还提供了一些常用的指令，例如 NgClass、NgStyle、NgModel 等。这些指令可以帮助我们更加便捷地实现一些常见的功能。
NgClass
NgClass 指令可以根据一个表达式的值来动态地添加或移除一个或多个 CSS 类。它的使用方法如下：
<div [ngClass]="{ 'class1': condition1, 'class2': condition2 }">This div has one or more classes.</div>其中，condition1 和 condition2 都是表达式，如果它们的值为 true，则 class1 和 class2 这两个 CSS 类会被添加到该 div 元素上。
NgStyle
NgStyle 指令可以根据一个表达式的值来动态地设置一个或多个 CSS 属性的值。它的使用方法如下：
<div [ngStyle]="{ 'color': color, 'font-size': fontSize + 'px' }">This div has one or more styles.</div>其中，color 和 fontSize 都是表达式，它们分别用于动态设置 color 和 font-size 这两个 CSS 属性的值。
NgModel
NgModel 指令可以将一个表单控件与一个变量绑定起来，从而实现双向数据绑定。它的使用方法如下：
<input [(ngModel)]="value">
其中，value 是一个变量，它会与该 input 元素的值进行双向数据绑定。如果用户在该 input 元素中输入了新的值，那么该变量的值也会被更新。
管道
Angular Common 库还提供了一些常用的管道，例如 DatePipe、UpperCasePipe、LowerCasePipe 等。这些管道可以帮助我们更加便捷地处理一些常见的数据。
DatePipe
DatePipe 管道可以将一个日期对象格式化为一个字符串。它的使用方法如下：
<p>{{ date | date:'yyyy-MM-dd' }}</p>其中，date 是一个日期对象，date 管道会将该日期对象格式化为 yyyy-MM-dd 这种形式的字符串。
UpperCasePipe
UpperCasePipe 管道可以将一个字符串转换为大写形式。它的使用方法如下：
<p>{{ text | uppercase }}</p>其中，text 是一个字符串，uppercase 管道会将该字符串转换为大写形式。
LowerCasePipe
LowerCasePipe 管道可以将一个字符串转换为小写形式。它的使用方法如下：
<p>{{ text | lowercase }}</p>其中，text 是一个字符串，lowercase 管道会将该字符串转换为小写形式。
总结
Angular Common 库提供了一些常用的组件、指令、管道等，这些工具可以帮助我们更加便捷地开发 Angular 应用。本文介绍了 Angular Common 库的使用方法，并提供了示例代码。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fea867d10417a2229e3e06