今天完成的事情：
指令
指令概览
在 Angular 中有三种类型的指令：
组件 — 拥有模板的指令
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令
内置指令
内置属性型指令
属性型指令会监听并修改其它 HTML 元素和组件的行为、Attribute 和 Property。 它们通常被应用在元素上，就好像它们是 HTML 属性一样，因此得名属性型指令
最常见的属性型指令：
NgClass —— 添加和删除一组 CSS 类
NgStyle —— 添加和删除一组 HTML 样式
NgModel —— 将数据双向绑定添加到 HTML 表单元素
NgClass
同时添加或删除几个 CSS 类
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
NgStyle
<div [ngStyle]="currentStyles">
This div is initially italic, normal weight, and extra large (24px).
</div>
[(ngModel)] ：双向绑定
<label for="example-ngModel">[(ngModel)]:</label>
<input [(ngModel)]="currentItem.name" id="example-ngModel">
导入 FormsModule 以使用 ngModel
在app.module.ts中
import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular
@NgModule({
imports: [
BrowserModule,
FormsModule
],
})
属性型指令
属性型指令用于改变一个 DOM 元素的外观或行为
创建一个简单的属性型指令
<p appHighlight>Highlight me!</p>
创建指令文件
ng generate directive highlight
生成的 src/app/highlight.directive.ts 文件
并设置颜色
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
响应用户引发的事件
把 HostListener 加进导入列表中，修改为
import { Directive, ElementRef, HostListener } from '@angular/core';
为HostListener 装饰器添加两个事件处理器
constructor(private el: ElementRef) { }
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
使用 @Input 数据绑定向指令传递值，修改为
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Input() highlightColor: string;
结构型指令
结构型指令的职责是 HTML 布局。 它们塑造或重塑 DOM 的结构，比如添加、移除或维护这些元素
*ngif
ngIf 指令并不是使用 CSS 来隐藏元素的。它会把这些元素从 DOM 中物理删除
*ngFor
用来遍历数据并动态的添加 DOM 元素
*ngSwitch
指令根据表达式显示或隐藏对应的部分
语法：
<div [ngSwitch]="hero?.emotion">
<app-happy-hero *ngSwitchCase="'happy'" [hero]="hero"></app-happy-hero>
<app-sad-hero *ngSwitchCase="'sad'" [hero]="hero"></app-sad-hero>
<app-confused-hero *ngSwitchCase="'confused'" [hero]="hero"></app-confused-hero>
<app-unknown-hero *ngSwitchDefault [hero]="hero"></app-unknown-hero>
</div>
明天计划：
学习使用angular的内置特性：如路由，客服端，表单
返回列表
评论