Angular-04:指令

1. 指令是angular操作dom的途径，分为属性指令和结构指令。
2. 属性指令：修改元素的外观或行为。使用 [ ] 包裹。
3. 结构指令：增加、删除dom节点以修改布局，使用*作为指令前缀。
4. 指令与模板关系密切，可以与DOM进行灵活交互，改变布局或者样式。
5. 组件也是指令的一种，区别在于：组件带有单独的模板，一般指令作用于已有DOM元素上。

• 此处列举的不完全，只是几个常用的

① 内置指令

1.1 *ngIf 结构指令

根据条件渲染DOM节点或者移出dom节点

<!--满足条件才渲染该节点--><div *ngIf="data.length===0">暂无数据</div>

1.2 [hidden] 属性指令

根据条件显示Dom节点或隐藏dom节点（display）根据样式来控制元素显示

1.3. *ngFor 结构指令

遍历数据生成html结构。

范例：ngFor所有属性

   <p *ngFor="let item of items;   // 数据遍历let i = index;   // 当前索引值let isEven = even;  // 当前是否是奇数行let isOdd = odd;   // 当前是否是偶数行let isFirst = first;  // 当前是否是第一行let isLast = last;  // 当前是否是最后一行trackBy:trackBy;  //优化数据渲染，提高性能。接收一个函数"></p>

 let i = index;  // index为ngFor内部提供的一个变量，这里声明一个变量i并赋值过来，就可以在页面上使用了。

1.4 *ngSwitch 结构指令

1. 控制显示那个模板，类似js中的switch
2. 语法：[ngSwitch]=“表达式” *ngSwitchCase=“条件值” *ngSwitchDefault----(在不满足任何条件时选择)

例：

<ul [ngSwitch]="status"><li *ngSwitchCase="1">周一</li><li *ngSwitchCase="2">周二</li><li *ngSwitchCase="3">周三</li><li *ngSwitchCase="4">周四</li><li *ngSwitchCase="5">周五</li><li *ngSwitchDefault>加班</li>
</ul>

status: number = 1;

结果： status值为1，显示“周一”；（如果status为0，或不符合以上条件则显示：“加班”）

---

② 自定义指令用法

场景：为元素设置默认的背景颜色，鼠标移入时的背景颜色以及移出时的背景颜色。

举例：元素默认为深蓝色，鼠标移入时变成粉色，移出变成黄色

• 用户可以设置自定义颜色，未设置颜色使用默认色深蓝色，自定义颜色使用了浅蓝色。

appBgColor指令

import { AfterViewInit, Directive, ElementRef, HostListener, Input } from '@angular/core';// 接收参数的类型
interface Options {bgColor?: string;
}@Directive({selector: '[appBgColor]'
})
export class BgColorDirective implements AfterViewInit {// 接收参数，没有传入值，默认为：#00aaff@Input("appBgColor") appBgColor: Options = {};//要操作的Dom节点element: HTMLElement;constructor(private el: ElementRef //获取要操作的Dom节点) {this.element = this.el.nativeElement;}// 组件模板初始化完成后设置元素的背景颜色ngAfterViewInit(): void {this.element.style.backgroundColor = this.appBgColor.bgColor || "#00aaff";}// 为元素添加鼠标移入监听@HostListener('mouseenter') enter() {this.element.style.backgroundColor = 'pink';}// 为元素添加鼠标移出监听@HostListener('mouseleave') leave() {this.element.style.backgroundColor = 'yellow';}
}

1.使用指令默认颜色
未设置颜色，使用默认颜色

<div class="test" appBgColor>第一块</div>

2.使用自定义颜色

<div class="test" [appBgColor]="{bgColor:'skyblue'}">第二块</div>

效果图：