Angular基础知识系列学习（三）--Angular内置基本指令介绍

Angular从入门到放弃秘籍

第一篇Angular的介绍以及基本环境搭建

第二篇Angular模板语法、插值语法、事件绑定

第三篇Angular内置基本指令介绍

第四篇Angular组件的创建、组件声明周期钩子函数

第五篇Angular父子组件传值，父传子，子传父，组件之间

第六篇Angular请求数据

第七篇Angular路由介绍、两种路由传参

前言

这个系列博客主要从Angular基础入手到入门在到一个后台应用的开发，学习过程中会不断将代码提交到下面仓库，感兴趣的朋友可以相互学习。https://github.com/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的基本内置指令，对这些基本指令的解释，下篇继续