前端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 = "Hello
"
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在浏览器中会被a
<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: 组件被销毁之前调用，用于清理操作