欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS?的生命周期和基礎(chǔ)語法使用詳解

 更新時(shí)間：2024年05月05日 11:01:24   作者：GeGe&YoYo  
當(dāng)你在輸入框中鍵入文本時(shí),這個(gè)文本會立即反映到?testString?屬性上,反之亦然,如果你在組件類中改變?testString?的值,輸入框的內(nèi)容也會相應(yīng)更新,這篇文章主要介紹了AngularJS?的生命周期和基礎(chǔ)語法,需要的朋友可以參考下

AngularJS 的生命周期和基礎(chǔ)語法

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)用一定會發(fā)生在ngOnInit()之前。

  • ngOnInit()

在組件初始化時(shí)調(diào)用。

通常用于執(zhí)行初始化邏輯，例如獲取初始數(shù)據(jù)。在第一輪 ngOnchanges()完成之后調(diào)用，只調(diào)用一次。

  • ngDoCheck()

當(dāng) Angular 安排檢查時(shí)調(diào)用。
用于自定義的變更檢測邏輯，通常與 ChangeDetectorRef 結(jié)合使用。在ngOnChanges()和ngOnInit()之后。

  • ngAfterContentInit()

在組件內(nèi)容投影完成后調(diào)用。
用于執(zhí)行需要在組件內(nèi)容初始化后執(zhí)行的邏輯。第一次ngDoCheck()之后調(diào)用，只調(diào)用一次，只適用于組件。

  • ngAfterContentChecked()

在每次 Angular 完成對組件內(nèi)容的檢查之后調(diào)用。
用于執(zhí)行在內(nèi)容檢查之后需要執(zhí)行的邏輯。ngAfterContentInit()和每次ngDoCheck()之后調(diào)用，只適用于組件。

  • ngAfterViewInit()

在組件視圖初始化完成后調(diào)用。
用于執(zhí)行需要訪問視圖的初始化邏輯。第一次ngAfterContentChecked()之后調(diào)用，只調(diào)用一次，只適合組件。

  • ngAfterViewChecked()

在每次 Angular 完成對組件視圖的檢查之后調(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è)測試框！')
  }
  add2(e:MouseEvent){
    console.log(e)
  }
}

按鈕1

按鈕2

4. if 語句

1. if 形式

在 app.component.ts 中定義變量 isShow

  isShow : boolean = true

app.component.html 中寫 if 判斷

<p *ngIf="isShow">
    這個(gè)測試一個(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è)測試框！')
  }
  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è)測試一個(gè)bool值！
</p>
<button (click)="changeShow()">修改show</button>
<p>第一種if寫法</p>
@if (isShow2) {
  <p>test3</p>
}
@else {
  <p>test4</p>
}
<p>第二種if寫法</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 語句

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è)測試框！')
  }
  add2(e:MouseEvent){
    console.log(e)
  }
  isShow : boolean = true
  isShow2 : boolean = true
  changeShow(){
    this.isShow2 = !this.isShow2
  }
  myList:Array<string> = [
    '死生契闊，與子成說',
    '執(zhí)子之手，與子偕老',
    '我心匪石，不可轉(zhuǎn)也',
    '有一美人兮，見之不忘'
  ]
}

app.component.html

<button (click)="add()">添加按鈕</button>
<button (click)="add2($event)">添加按鈕2</button>
<p *ngIf="isShow">
    這個(gè)測試一個(gè)bool值！
</p>
<button (click)="changeShow()">修改show</button>
<p>第一種if寫法</p>
@if (isShow2) {
  <p>test3</p>
}
@else {
  <p>test4</p>
}
<p>第二種if寫法</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> &#64; 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 語句

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è)測試框！')
  }
  add2(e:MouseEvent){
    console.log(e)
  }
  isShow : boolean = true
  isShow2 : boolean = true
  changeShow(){
    this.isShow2 = !this.isShow2
  }
  myList:Array<string> = [
    '死生契闊，與子成說',
    '執(zhí)子之手，與子偕老',
    '我心匪石，不可轉(zhuǎ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è)測試一個(gè)bool值！
</p>
<button (click)="changeShow()">修改show</button>
<p>第一種if寫法</p>
@if (isShow2) {
  <p>test3</p>
}
@else {
  <p>test4</p>
}
<p>第二種if寫法</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> &#64; 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>&#64; switch 形式</p>
@switch (author) {
  @case (1) {
    <p>若非群玉山頭見 會向瑤臺月下逢</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è)測試框！')
  }
  add2(e:MouseEvent){
    console.log(e)
  }
  isShow : boolean = true
  isShow2 : boolean = true
  changeShow(){
    this.isShow2 = !this.isShow2
  }
  myList:Array<string> = [
    '死生契闊，與子成說',
    '執(zhí)子之手，與子偕老',
    '我心匪石，不可轉(zhuǎ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è)測試一個(gè)bool值！
</p>
<button (click)="changeShow()">修改show</button>
<p>第一種if寫法</p>
@if (isShow2) {
  <p>test3</p>
}
@else {
  <p>test4</p>
}
<p>第二種if寫法</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> &#64; 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>&#64; switch 形式</p>
@switch (author) {
  @case (1) {
    <p>若非群玉山頭見 會向瑤臺月下逢</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í)際上展開為：

<input [ngModel]="testString" (ngModelChange)="testString=$event" type="text" >

這里有兩個(gè)關(guān)鍵部分：

  • [ngModel]=“testString”：這是一個(gè)屬性綁定，它將 ngModel 的值設(shè)置為組件的 testString屬性。這意味著當(dāng) testString 在組件類中改變時(shí)，ngModel 的值（即輸入框的值）也會自動更新。
  • (ngModelChange)=“testString=$event”：這是一個(gè)事件綁定，它監(jiān)聽 ngModelChange事件。當(dāng)輸入框的值改變時(shí)，這個(gè)事件會被觸發(fā)，并將新的值作為 $event 傳遞給事件處理器。事件處理器將 $event 的值賦給testString，從而實(shí)現(xiàn)了從視圖到組件的數(shù)據(jù)更新。

所以，當(dāng)你在輸入框中鍵入文本時(shí)，這個(gè)文本會立即反映到 testString 屬性上，反之亦然，如果你在組件類中改變 testString 的值，輸入框的內(nèi)容也會相應(yīng)更新。

到此這篇關(guān)于AngularJS 的生命周期和基礎(chǔ)語法的文章就介紹到這了,更多相關(guān)AngularJS 的生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論