前端Angular框架基础知识（一）

一、组件模板

1.1 数据绑定

数据驱动DOM：将组件类(.ts文件)中的数据显示在组件模板(.html文件)中，当类中的数据发生变化会自动同步到模板中.

Angular中使用差值表达式进行数据绑定，{{ }}语法

<h2>{{ message }}</h2>
<p [innerHtml] = “htmlString”></p> //显示html标记，渲染出h1样式
<h2>{{ getInfo() }}</h2>
<h2>{{ a === b ? ‘相等’ ： ‘不等’}}</h2>
<h2>{{ ‘angular’}}</h2>            //显示angular字符串

export class AppComponent {
    message: string = "Hello Angular"
    htmlString: string = "<h1>Hello</h1>"
    getInfo(){
        return "返回的内容"
    }
}

1.2 属性绑定

1.2.1 普通属性

使用【属性名称】为元素绑定DOM对象属性

使用【attr.属性名称】为元素绑定HTML标记属性

<img [src]="imgUrl" />
<div [attr.data-text]="title"></div>

1.2.2 class属性

动态为元素添加类名

//isActive是一个boolean值，如果为真，则为button添加类名active
<button class="btn" [class.active]="isActive"></button>
<div [ngClass]="{active:true, error:true}"></div>

1.2.3 style属性

动态为元素添加行内样式

//[style.样式]判断isActive是否为真，如果为真，则背景颜色为blue，否则为红色
<button [style.backgroundColor]="isActive? 'blue : 'red' "></button>
<div [style.width]="'200px'"></div>
//可以同时添加多个样式
<div [ngStyle]="{backgroundColor:'red', width:'200px', height:'300px'}"></div>

1.3 事件绑定

<button (click)="onSave($event)">按钮</button>

export class AppComponent {
    title = "Angular"
    onSave(event: Event){
        this.title
    }
}

1.4双向数据绑定

数据在组件类和组件模板中双向同步。

Angular将双向数据绑定功能放在了@angular/forms模块中，所以要实现双向数据绑定需要依赖该模块。

import { FormsModule } from "@angular/forms"

export class AppComponnet {
	username: string = " ";
	setData(){
		this.username = "hello angular"
	}
}

<input type="text" [(ngModel)]="username"/>
<button (click)="setData">更改数据</button>

1.5 内容投影

//app.componnet.html
<app-demo>
	//想把这两个内容投影到app-demo组件内部
	<ng-container class="aaa">a</ng-container> 
	<div class="bbb">b</div>
</app-demo>
//app-demo.componnet.html
<div>
//ng-content在浏览器中会被<div class="aaa">a</div> 
	<ng-content select=".aaa"></ng-content>
</div>
<ng-container>
	<ng-content select=".bbb"></ng-content>
</ng-container>

1.6 获取原生DOM对象

//1.在模板中获取，这个button模板的自定义名字就叫myBtn
<button #myBtn (click)="onclick(myBtn)">bbb</button>

onclick(button: ElementRef<HTMLButtonElement>){
conosole.log()
}

//2.在类中获取，使用ViewChild装饰器获取一个dom对象，ViewChildren获取一组元素
<p #paragraph>hello</p>

@ViewChild("paragraph") para: ElementRef<HTMLParagraphElement> | undefined
ngAfterViewInit(){
	console.log(this.para?.nativeElement)
}

<ul>
	<li #items>a</li>
	<li #items>b</li>
	<li #items>c</li>
</ul>

@ViewChildren("items") items: QueryList<HTMLLIElement> | undefined
ngAfterViewInit(){
	console.log(this.items?.toArray)
}

二、指令Directive

指令的作用是简化DOM操作
属性指令：修改一个现有元素的外观和行为，使用 [ ]包裹；
结构指令：通过在中添加、移除和替换元素来修改布局，结构指令使用*作为指令前缀；

2.1 内置指令

[hidden]
*ngIf
*ngFor

<div *ngIf="data.length>0; then dataList else noData"></div>
<ng-tempalte #dataList>课程列表</ng-templete>
<ng-tempalte #noData>无数据</ng-templete>

2.2 自定义指令

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

//在需要使用指令的模板中添加指令的名字即可，这里指令的名字就叫appHover，如果需要绑定动态数据，就需要在指令名字后面添加中括号
<div [appHover]="{bgColor:'blue'}">Hello</div>

//hover.directive.ts
import { Directive,AfterViewInit,ElementRef } from '@angular/core"
//接收参数类型
interface Optins {
	bgColor?:string
}
@Directive({
	selector: '[appHover]'
})
export class HoverDirective implements AfterViewInit{
	@Input("appHover") appHover: Options = {}; //接收参数
	element: HTMLElement; //要操作的DOM节点
	construcor(private elementRef: ElementRef){
		this.element = this.elementRef.nativeElement; //获取要操作的DOM节点
	}
	ngAfterViewInit(){ //模板初始化完成后设置元素背景颜色
		this.element.style.backgronudColor = this.appHover.bgColor || 'pink';
	}
	@HostListener('mouseenter') enter(){ //为元素添加鼠标移入事件
		this.element.style.backgroundColor = 'red';
	}
}

三、管道pipe

格式化模板数据

3.1 内置管道

date 日期格式化
currency 货币格式化
uppercase 转大写
lowercase 转小写
json 格式化json数据
{{ date | date: "yyyy-MM-dd" }}

3.2 自定义管道

需求：制定字符串不超过规定长度

//summary.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe ({
	name:'summary' //管道名字
});
export class SummaryPipe implements PipeTransform {
	transform(value:string, limit?:number){
		if(!value) return null;
		return value.substr(0, limit) + '...';
		}
	}
//app.module.ts
import { SummaryPipe } from './summary.pipe'
@NgModule({
	declarations:[
		SummaryPipe
	]
})
<div>{{ paragraph | summary:20 }}</div>

四、组件通信

4.1 向组件内部传递数据

//app.component.html
<app-person name="zs" age="18"></app-person>
//app-person.ts
@Input("name") myName: string = " ";
@Input("age") myAge: number = 0;
//app-person.html
<div>{{myName}} {{myAge}}</div>

4.2 向组件外部传递数据

//子组件
<button (click)="onClick()"></button>

@Output() sendData = new EventEmitter()
onClick(){
	this.sendData.emit("子组件中数据")//触发自定义事件sendData()
}

//父组件
<app-person (sendData)="getData($event)"></app-person>

getData(event:string){
	alert(event)
}

五、生命周期

5.1、挂载阶段

挂载阶段的生命周期函数只在挂载阶段执行一次，数据更新不及时

• constructor：实例化组件类时候执行，可以用来接收注入的服务实例对象；
• ngOnInit：首次接收到输入属性值后执行，在此处可以执行请求操作；
• ngAfterContentInit：当内容投影初始化渲染完成后调用
• ngAfterViewInit：当组件视图渲染完成后调用

5.2、更新阶段

1.ngOnChanges

• 当输入属性值发生变化时执行，初始设置时也会执行一次，顺序优于ngOnInit
• 不论多少输入属性同时变化，钩子函数只会执行一次，变化的值会同时存储在参数中
• 参数类型为SimpleChanges，子属性类型为SimpleChange
• 对于基本数据类型，只要值发生变化就可以检测到
• 对于引用数据类型，可以检测到从一个对象变成另一个对象，但检测不到同一个对象中属性值的变化，但不影响组件模板更新数据

2.ngDoCheck：主要用于调试，只要输入属性变化，都会执行
3.ngAfterContenntChecked：内容投影更新完成后执行
4.ngAfterViewChecked：组件视图更新完成后执行

5.3、卸载阶段

ngOnDestroy: 组件被销毁之前调用，用于清理操作