前端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: 组件被销毁之前调用,用于清理操作

你可能感兴趣的:(前端框架Angular,angular.js,前端,javascript)