Angular从入门到放弃秘籍
第一篇Angular的介绍以及基本环境搭建
第二篇Angular模板语法、插值语法、事件绑定
第三篇Angular内置基本指令介绍
第四篇Angular组件的创建、组件声明周期钩子函数
第五篇Angular父子组件传值，父传子，子传父，组件之间
第六篇Angular请求数据
第七篇Angular路由介绍、两种路由传参
Angular基础系列
Angular从入门到放弃秘籍前言一、Angular内置基本指令介绍1.属性指令2.结构型指令 总结前言
这个系列博客主要从Angular基础入手到入门在到一个后台应用的开发，学习过程中会不断将代码提交到下面仓库，感兴趣的朋友可以相互学习。/houcw/my-angular-app.git
.
一、Angular内置基本指令介绍
1.属性指令
（示例）：
NgClass：可以动态的给标签设置css类或者删除css类，语法：<div [ngClass]="isSpecial ? 'special' : ''"></div>对比：类似于Vue中的 :style={'类名':布尔值}NgStyle：可以根据组件的不同状态使用多个内联样式，可以通过函数的方式返回。语法：在html文件中使用ngStyle<div [ngStyle]="currentStyles"> </div>在ts文件中定义：setCurrentStyles() {this.currentStyles = {'font-style': 变量1 ? 'italic' : 'normal','font-weight': 变量2 ? 'bold' : 'normal','font-size': 变量3 ? '24px' : '12px'};}可以根据不同的变量，进行判断，设置不同的内联样式注意:在初始化的时候调用setCurrentStyles函数，当依赖的变量发生变化的时候，也要重新调用setCurrentStyles函数NgModel：双向绑定语法和Vue的v-model效果相同，在Angular中主要是针对表单数据的双向绑定，在使用之前必须要在app.module.ts 中导入FormsModule 模块，并且要添加到NgModule的import中。语法：app.module.ts文件：引入：import {FormsModule } from '@angular/forms';使用：@NgModule({imports: [BrowserModule,FormsModule // <--- import into the NgModule],})在html页面中进行双向绑定：<input [(ngModel)]="currentItem.name"/> <div>{{currentItem.name}}</div>
2.结构型指令
（示例）：
NgIf/Ngelse动态控制DOM元素的显示与隐藏，语法：<div *ngIf="isActive" ></div>类比：和Vue的v-if，v-else语法相同，都是可以控制DOM元素的动态的显示与隐藏注意：ngIf前面的*是一个用来简化复杂语法的“语法糖”，Angular会把ngIf编译成为一个<ng-template>元素，并且会用<ng-template>包裹宿主，根据变量的布尔值来显示对应的元素实现方式：<ng-template [ngIf]="hero"><div class="name">{{hero.name}}</div></ng-template>NgFor动态遍历模板渲染列表语法：<div *ngFor="let item of items;let key =index"></div>类比：和Vue中的Vue-for指令功能相同，会根据传入的列表，循环渲染Html模板注意：NgFor和NgIf原理相同，会把带有*的语法转换成为<ng-template>元素，然后根据传入的数组，循环遍历这个template模板。index是循环产生的key，如果你需要使用，要在循环中先声明实现方式：<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"><div [class.odd]="odd">({{i}}) {{hero.name}}</div></ng-template>关于trackBy的说明：如果对象列表会随着后端服务器变化频繁改变，那么Angular只能重新根据新的对象列表渲染DOM，重复执行会影响效率，trackBy的目的就是为了提高这一过程的效率，可以在组件中添加trackBy方法，跟踪对象列表中的某一特定值，如果trackBy跟踪的值已经被渲染过那么Angular就不会再次重新渲染，相同的值。实现方式：在html模板中:<div *ngFor="let item of items; trackBy: trackByItems">({{item.id}}) {{item.name}}</div>在ts中跟踪id：trackByItems(index: number, item: Item): number {return item.id; }NgSwitch根据不同的条件显示不同的HTML元素，将选定的元素放入DOM渲染语法：<div [ngSwitch]="currentItem.feature"><app-stout-item *ngSwitchCase="'stout'" [item]="currentItem"></app-stout-item><app-unknown-item *ngSwitchDefault [item]="currentItem"></app-unknown-item></div>说明：与常见的switch case语法相同，根据不同的变量展示不同
总结
这篇文章主要是介绍了Angular的基本内置指令，对这些基本指令的解释，下篇继续
如果觉得《Angular基础知识系列学习（三）--Angular内置基本指令介绍》对你有帮助，请点赞、收藏，并留下你的观点哦！
