Angular-04:指令
- ① 内置指令
- 1.1 *ngIf 结构指令
- 1.2 [hidden] 属性指令
- 1.3. *ngFor 结构指令
- 1.4 *ngSwitch 结构指令
- ② 自定义指令用法
- 指令是angular操作dom的途径，分为属性指令和结构指令。
- 属性指令：修改元素的外观或行为。使用 [ ] 包裹。
- 结构指令：增加、删除dom节点以修改布局，使用*作为指令前缀。
- 指令与模板关系密切，可以与DOM进行灵活交互，改变布局或者样式。
- 组件也是指令的一种，区别在于：组件带有单独的模板，一般指令作用于已有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 结构指令
- 控制显示那个模板，类似js中的switch
- 语法：[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>
效果图：
