AngularJS?的生命周期和基礎(chǔ)語(yǔ)法使用詳解
更新時(shí)間：2024年05月05日 11:01:24 作者：GeGe&YoYo
當(dāng)你在輸入框中鍵入文本時(shí),這個(gè)文本會(huì)立即反映到?testString?屬性上,反之亦然,如果你在組件類中改變?testString?的值,輸入框的內(nèi)容也會(huì)相應(yīng)更新,這篇文章主要介紹了AngularJS?的生命周期和基礎(chǔ)語(yǔ)法,需要的朋友可以參考下
AngularJS 的生命周期和基礎(chǔ)語(yǔ)法
1. 使用步驟
// 1. 要使用哪個(gè)鉤子函數(shù)，就先引入
import { OnInit } from ...
// 2. 再實(shí)現(xiàn)
export class 組件名 implements Onint...
// 3. 再使用
ngOnInit(){
....
}2. 生命周期鉤子函數(shù)
- ngOnChanges()
當(dāng)輸入屬性的值發(fā)生變化時(shí)調(diào)用。
在組件被創(chuàng)建并且輸入屬性綁定發(fā)生變化時(shí)調(diào)用。首次調(diào)用一定會(huì)發(fā)生在ngOnInit()之前。
- ngOnInit()
在組件初始化時(shí)調(diào)用。
通常用于執(zhí)行初始化邏輯，例如獲取初始數(shù)據(jù)。在第一輪 ngOnchanges()完成之后調(diào)用，只調(diào)用一次。
- ngDoCheck()
當(dāng) Angular 安排檢查時(shí)調(diào)用。
用于自定義的變更檢測(cè)邏輯，通常與 ChangeDetectorRef 結(jié)合使用。在ngOnChanges()和ngOnInit()之后。
- ngAfterContentInit()
在組件內(nèi)容投影完成后調(diào)用。
用于執(zhí)行需要在組件內(nèi)容初始化后執(zhí)行的邏輯。第一次ngDoCheck()之后調(diào)用，只調(diào)用一次，只適用于組件。
- ngAfterContentChecked()
在每次 Angular 完成對(duì)組件內(nèi)容的檢查之后調(diào)用。
用于執(zhí)行在內(nèi)容檢查之后需要執(zhí)行的邏輯。ngAfterContentInit()和每次ngDoCheck()之后調(diào)用，只適用于組件。
- ngAfterViewInit()
在組件視圖初始化完成后調(diào)用。
用于執(zhí)行需要訪問(wèn)視圖的初始化邏輯。第一次ngAfterContentChecked()之后調(diào)用，只調(diào)用一次，只適合組件。
- ngAfterViewChecked()
在每次 Angular 完成對(duì)組件視圖的檢查之后調(diào)用。
用于執(zhí)行在視圖檢查之后需要執(zhí)行的邏輯。ngAfterViewInit()和每次ngAfterContentChecked()之后調(diào)用，只適合組件。
- ngOnDestroy()
在組件銷毀時(shí)調(diào)用。
通常用于清理資源，取消訂閱等。
3. 點(diǎn)擊事件
將 app.component.html 文件內(nèi)容清空，只保留<router-outlet/>
在 app.component.html 中添加button標(biāo)簽，并按下面代碼添加點(diǎn)擊事件
<button (click)="add()">添加按鈕</button> <button (click)="add2($event)">添加按鈕2</button> <router-outlet/>
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule,RouterOutlet,FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'testDemo';
add(){
alert('這是一個(gè)測(cè)試框！')
}
add2(e:MouseEvent){
console.log(e)
}
}按鈕1
按鈕2
4. if 語(yǔ)句
1. if 形式
在 app.component.ts 中定義變量 isShow
isShow : boolean = true
app.component.html 中寫(xiě) if 判斷
<p *ngIf="isShow">
這個(gè)測(cè)試一個(gè)bool值！
</p>
2. if else 形式
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule,RouterOutlet,FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'testDemo';
add(){
alert('這是一個(gè)測(cè)試框！')
}
add2(e:MouseEvent){
console.log(e)
}
isShow : boolean = true
isShow2 : boolean = true
changeShow(){
this.isShow2 = !this.isShow2
}
}app.component.html
<button (click)="add()">添加按鈕</button>
<button (click)="add2($event)">添加按鈕2</button>
<p *ngIf="isShow">
這個(gè)測(cè)試一個(gè)bool值！
</p>
<button (click)="changeShow()">修改show</button>
<p>第一種if寫(xiě)法</p>
@if (isShow2) {
<p>test3</p>
}
@else {
<p>test4</p>
}
<p>第二種if寫(xiě)法</p>
<ng-container *ngIf="isShow2;else elseTemplate">
<p>test1</p>
</ng-container>
<ng-template #elseTemplate>
<p>test2</p>
</ng-template>
<router-outlet />
點(diǎn)擊按鈕
5. for 語(yǔ)句
app.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule,RouterOutlet,FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'testDemo';
add(){
alert('這是一個(gè)測(cè)試框！')
}
add2(e:MouseEvent){
console.log(e)
}
isShow : boolean = true
isShow2 : boolean = true
changeShow(){
this.isShow2 = !this.isShow2
}
myList:Array<string> = [
'死生契闊，與子成說(shuō)',
'執(zhí)子之手，與子偕老',
'我心匪石，不可轉(zhuǎn)也',
'有一美人兮，見(jiàn)之不忘'
]
}app.component.html
<button (click)="add()">添加按鈕</button>
<button (click)="add2($event)">添加按鈕2</button>
<p *ngIf="isShow">
這個(gè)測(cè)試一個(gè)bool值！
</p>
<button (click)="changeShow()">修改show</button>
<p>第一種if寫(xiě)法</p>
@if (isShow2) {
<p>test3</p>
}
@else {
<p>test4</p>
}
<p>第二種if寫(xiě)法</p>
<ng-container *ngIf="isShow2;else elseTemplate">
<p>test1</p>
</ng-container>
<ng-template #elseTemplate>
<p>test2</p>
</ng-template>
<p>---------------------------</p>
<p>*ngFor 形式</p>
<p *ngFor="let item of myList let i=index" [style.color]="i % 2 === 0 ? 'red' : 'blue'">
{{i+1}}.{{item}}
</p>
<p> @ for 形式 </p>
<p>11111111111111</p>
@for (item of myList; track item) {
<div>
{{item}}
</div>
}@empty {
empty myList
}
<p>222222222222</p>
@for (item of myList; track $index) {
<p>{{$index+1}}、{{item}}</p>
}
<p>3333333333</p>
<p>---------------------------</p>
<router-outlet />
6. switch 語(yǔ)句
app.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule,RouterOutlet,FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'testDemo';
add(){
alert('這是一個(gè)測(cè)試框！')
}
add2(e:MouseEvent){
console.log(e)
}
isShow : boolean = true
isShow2 : boolean = true
changeShow(){
this.isShow2 = !this.isShow2
}
myList:Array<string> = [
'死生契闊，與子成說(shuō)',
'執(zhí)子之手，與子偕老',
'我心匪石，不可轉(zhuǎn)也',
'有一美人兮，見(jiàn)之不忘'
]
author:number = 0
changAuthor() {
this.author = this.author+1
console.log(this.author)
}
}app.component.html
<button (click)="add()">添加按鈕</button>
<button (click)="add2($event)">添加按鈕2</button>
<p *ngIf="isShow">
這個(gè)測(cè)試一個(gè)bool值！
</p>
<button (click)="changeShow()">修改show</button>
<p>第一種if寫(xiě)法</p>
@if (isShow2) {
<p>test3</p>
}
@else {
<p>test4</p>
}
<p>第二種if寫(xiě)法</p>
<ng-container *ngIf="isShow2;else elseTemplate">
<p>test1</p>
</ng-container>
<ng-template #elseTemplate>
<p>test2</p>
</ng-template>
<p>---------------------------</p>
<p>*ngFor 形式</p>
<p *ngFor="let item of myList let i=index" [style.color]="i % 2 === 0 ? 'red' : 'blue'">
{{i+1}}.{{item}}
</p>
<p> @ for 形式 </p>
<p>11111111111111</p>
@for (item of myList; track item) {
<div>
{{item}}
</div>
}@empty {
empty myList
}
<p>222222222222</p>
@for (item of myList; track $index) {
<p>{{$index+1}}、{{item}}</p>
}
<p>3333333333</p>
<p>---------------------------</p>
<p>ngSwitch 形式</p>
<button (click)="changAuthor()">修改作者</button>
<div [ngSwitch]="author" [style.color]="author % 2 === 0 ? 'red' : 'blue'">
<p *ngSwitchCase="1">
這是switch1
</p>
<p *ngSwitchCase="2">
這是switch2
</p>
<p *ngSwitchCase="3">
這是switch3
</p>
<p *ngSwitchDefault>
這是默認(rèn){{author}}
</p>
</div>
<p>@ switch 形式</p>
@switch (author) {
@case (1) {
<p>若非群玉山頭見(jiàn) 會(huì)向瑤臺(tái)月下逢</p>
}
@case (2) {
<p>春宵一刻值千值千金,花有清香月有陰</p>
}
@default {
<p>情催桃李艷，心寄管弦飛</p>
}
}
<router-outlet />
點(diǎn)擊按鈕
7. 雙向數(shù)據(jù)綁定
實(shí)現(xiàn)雙向數(shù)據(jù)綁定，需要引入angular 內(nèi)置的 FormsModule 模塊
在 app.component.ts 文件中引入
import { FormsModule } from '@angular/forms';并在 @Component 的 import 中添加 FormsModule
app.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule,RouterOutlet,FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'testDemo';
add(){
alert('這是一個(gè)測(cè)試框！')
}
add2(e:MouseEvent){
console.log(e)
}
isShow : boolean = true
isShow2 : boolean = true
changeShow(){
this.isShow2 = !this.isShow2
}
myList:Array<string> = [
'死生契闊，與子成說(shuō)',
'執(zhí)子之手，與子偕老',
'我心匪石，不可轉(zhuǎn)也',
'有一美人兮，見(jiàn)之不忘'
]
author:number = 0
changAuthor() {
this.author = this.author+1
console.log(this.author)
}
testString:string='test001'
}app.component.html
<button (click)="add()">添加按鈕</button>
<button (click)="add2($event)">添加按鈕2</button>
<p *ngIf="isShow">
這個(gè)測(cè)試一個(gè)bool值！
</p>
<button (click)="changeShow()">修改show</button>
<p>第一種if寫(xiě)法</p>
@if (isShow2) {
<p>test3</p>
}
@else {
<p>test4</p>
}
<p>第二種if寫(xiě)法</p>
<ng-container *ngIf="isShow2;else elseTemplate">
<p>test1</p>
</ng-container>
<ng-template #elseTemplate>
<p>test2</p>
</ng-template>
<p>---------------------------</p>
<p>*ngFor 形式</p>
<p *ngFor="let item of myList let i=index" [style.color]="i % 2 === 0 ? 'red' : 'blue'">
{{i+1}}.{{item}}
</p>
<p> @ for 形式 </p>
<p>11111111111111</p>
@for (item of myList; track item) {
<div>
{{item}}
</div>
}@empty {
empty myList
}
<p>222222222222</p>
@for (item of myList; track $index) {
<p>{{$index+1}}、{{item}}</p>
}
<p>3333333333</p>
<p>---------------------------</p>
<p>ngSwitch 形式</p>
<button (click)="changAuthor()">修改作者</button>
<div [ngSwitch]="author" [style.color]="author % 2 === 0 ? 'red' : 'blue'">
<p *ngSwitchCase="1">
這是switch1
</p>
<p *ngSwitchCase="2">
這是switch2
</p>
<p *ngSwitchCase="3">
這是switch3
</p>
<p *ngSwitchDefault>
這是默認(rèn){{author}}
</p>
</div>
<p>@ switch 形式</p>
@switch (author) {
@case (1) {
<p>若非群玉山頭見(jiàn) 會(huì)向瑤臺(tái)月下逢</p>
}
@case (2) {
<p>春宵一刻值千值千金,花有清香月有陰</p>
}
@default {
<p>情催桃李艷，心寄管弦飛</p>
}
}
<input [(ngModel)]="testString" type="text" >{{testString}}
<input name="firstInput" [(ngModel)]="testString" type="text" style="width: 200px;">
{{testString}}
<router-outlet />
輸入之后
這里解釋一下
<input [(ngModel)]="testString" type="text" >
[(ngModel)] 實(shí)際上展開(kāi)為：
<input [ngModel]="testString" (ngModelChange)="testString=$event" type="text" >
這里有兩個(gè)關(guān)鍵部分：
- [ngModel]=“testString”：這是一個(gè)屬性綁定，它將 ngModel 的值設(shè)置為組件的 testString屬性。這意味著當(dāng) testString 在組件類中改變時(shí)，ngModel 的值（即輸入框的值）也會(huì)自動(dòng)更新。
- (ngModelChange)=“testString=$event”：這是一個(gè)事件綁定，它監(jiān)聽(tīng) ngModelChange事件。當(dāng)輸入框的值改變時(shí)，這個(gè)事件會(huì)被觸發(fā)，并將新的值作為 $event 傳遞給事件處理器。事件處理器將 $event 的值賦給testString，從而實(shí)現(xiàn)了從視圖到組件的數(shù)據(jù)更新。
所以，當(dāng)你在輸入框中鍵入文本時(shí)，這個(gè)文本會(huì)立即反映到 testString 屬性上，反之亦然，如果你在組件類中改變 testString 的值，輸入框的內(nèi)容也會(huì)相應(yīng)更新。
到此這篇關(guān)于AngularJS 的生命周期和基礎(chǔ)語(yǔ)法的文章就介紹到這了,更多相關(guān)AngularJS 的生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Web開(kāi)發(fā)使用Angular實(shí)現(xiàn)用戶密碼強(qiáng)度判別的方法
這篇文章主要介紹了Web開(kāi)發(fā)使用Angular實(shí)現(xiàn)用戶密碼強(qiáng)度判別的方法,需要的朋友可以參考下2017-09-09
AngularJS應(yīng)用開(kāi)發(fā)思維之依賴注入3
這篇文章主要為大家詳細(xì)介紹了AngularJS應(yīng)用開(kāi)發(fā)思維之依賴注入第三篇，感興趣的小伙伴們可以參考一下2016-08-08
下面小編就為大家?guī)?lái)一篇基于angularJS的表單驗(yàn)證指令介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
Angular4.x通過(guò)路由守衛(wèi)進(jìn)行路由重定向?qū)崿F(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁(yè)面(推薦)
這篇文章主要介紹了Angular4.x通過(guò)路由守衛(wèi)進(jìn)行路由重定向，實(shí)現(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁(yè)面,這個(gè)功能在網(wǎng)上商城項(xiàng)目上經(jīng)常會(huì)用到，下面小編給大家?guī)?lái)了解決方法一起看看吧2018-05-05
Angular2.0/4.0 使用Echarts圖表的示例代碼
本篇文章主要介紹了Angular2.0/4.0 使用Echarts的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Angular父子組件通過(guò)服務(wù)傳參的示例方法
這篇文章主要介紹了Angular父子組件通過(guò)服務(wù)傳參的示例方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Angular 通過(guò)注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例
這篇文章主要介紹了Angular 通過(guò)注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例代碼,需要的朋友可以參考下2017-05-05
3個(gè)可以改善用戶體驗(yàn)的AngularJS指令介紹
這篇文章主要介紹了3個(gè)可以改善用戶體驗(yàn)的AngularJS指令,AngularJS是一款具有很高人氣的JavaScript框架,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了AngularJS 表達(dá)式，這里整理了詳細(xì)的資料，有需要的小伙伴可以參考下2016-09-09
ionic3+Angular4實(shí)現(xiàn)接口請(qǐng)求及本地json文件讀取示例
本篇文章主要介紹了ionic3+Angular4實(shí)現(xiàn)接口請(qǐng)求及本地json文件讀取示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10