Angular表單、管道、綁定、指令、通信和周期源碼分析
這篇文章主要介紹了Angular表單、管道、綁定、指令、通信和周期源碼分析的相關知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Angular表單、管道、綁定、指令、通信和周期源碼分析文章都會有所收獲，下面我們一起來看看吧。
創(chuàng)新互聯(lián)公司專注于新密企業(yè)網(wǎng)站建設,響應式網(wǎng)站,成都商城網(wǎng)站開發(fā)。新密網(wǎng)站建設公司,為新密等地區(qū)提供建站服務。全流程按需設計，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務
1 Angular的兩大表單
1.1 模板驅動表單
模板驅動表單：引入FormsModule模塊，表單的控制邏輯都是寫在模板里的，每一個表單元素都是和一個負責管理內(nèi)部表單模型的指令關聯(lián)起來的。
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-module-form',
template:`
<form #moduleForm="ngForm" (submit)="OnSubmit(moduleForm)">
<label>用戶名：
<input type="text" name="username" ngModel required minlength="2" maxlength="6" #username="ngModel"><br>
<ng-container *ngIf="username.touched&&username.errors">
<div *ngIf="username.errors.required">請輸入用戶名</div>
<div *ngIf="username.errors.minlength">最少2個字符</div>
<div *ngIf="username.errors.maxlength">最多6個字符</div>
</ng-container>
</label>
<label>
密 碼：
<input style="margin-top: 10px;" type="text" name="password" ngModel required minlength="6" pattern="[a-zA-Z0-9]+" #password="ngModel"><br>
<ng-container *ngIf="password.touched&&password.errors">
<div *ngIf="password.errors.required">請輸入密碼</div>
<div *ngIf="password.errors.minlength">最少6個字符</div>
<div *ngIf="password.errors.pattern">至少包含大小寫、數(shù)字</div>
</ng-container>
</label>
<button style="margin-top: 20px;" type="submit" [disabled]="!moduleForm.valid">提交</button>
</form>
`,
styleUrls: ['./module-form.component.less']
})
export class ModuleFormComponent implements OnInit {
constructor() { }
ngOnInit() {
}
OnSubmit(moduleForm:NgForm){
console.log(moduleForm.value);
}
}1.2 響應式表單
響應式表單：需要引入ReactiveFormsModule模塊，在響應式表單中，視圖中的每個表單元素都直接鏈接到一個表單模型。
FormControl：是構成表單的基本單位。實例用于追蹤
單個表單控件的值和驗證狀態(tài)FormGroup：用于追蹤一個
表單控件組的值和狀態(tài)。FormGroup和FormArray的區(qū)別：formgroup既可以代表表單一部分也可以代表整個表單；formarray有一個額外的長度屬性，它的formControl是沒有相關的key的，只能通過訪問formarray中的元素。
<input [formControl]="username"> <!--不帶表單的input-->
//原始的定義方法
export class ReactiveRegistComponent implements OnInit {
formModel:FormGroup;
constructor() {
this.formModel=new FormGroup({
username:new FormControl(),
mobile:new FormControl(),
passwordsGroup: new FormGroup({
password:new FormControl(),
pconfirm:new FormControl(),
})
});
}
}
//使用formBuilder后的定義
constructor(fb:FormBuilder) {
this.formModel=fb.group({
username:[''],
mobile:[''],
passwordsGroup: fb.group({
password:[''],
pconfirm:[''],
})
});
}import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
@Component({
selector: 'app-module-form',
// templateUrl: './module-form.component.html',
template:`
<form [formGroup]="form">
<label>用戶名：
<input type="text" formControlName="username"><br>
<ng-container *ngIf="form.controls['username'].errors?.['required']"><div style="color: red;">請輸入用戶名</div></ng-container>
<ng-container *ngIf="form.controls['username'].errors?.['maxlength']"><div style="color: red;">最多只能有6個字符</div></ng-container>
</label>
<label>
密 碼：
<input style="margin-top: 10px;" formControlName="password"><br>
<ng-container *ngIf="form.controls['password'].errors?.['required']"><div style="color: red;">請輸入密碼</div></ng-container>
</label>
</form>
`,
styleUrls: ['./module-form.component.less']
})
export class ModuleFormComponent implements OnInit {
form!: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
username:[null,[Validators.required,Validators.maxLength(6)]],
password:[null,[Validators.required]],
})
}
}自定義驗證器：
export function whiteSpaceValidator(): ValidatorFn {
// 不能全輸入空格，驗證
return (control: FormControl): { [s: string]: boolean } => {
const reg = new RegExp(/\s/g);
if (reg.test(control.value)) {
return { required: true };
}
};
}2 Angular管道
管道：把數(shù)據(jù)作為輸入，然后轉換它并給出輸出。
2.1 內(nèi)置管道
Angular的一些內(nèi)置管道：如date、uppercase、lowercase、currency、percent等，不用引入，直接在任何組件中使用。注意：用date轉化的數(shù)據(jù)不能為字符串，必須為Date類數(shù)據(jù)。
<!-- curDate = new Date(); -->
<!-- 當前時間日期為Apr 20, 2022 -->
<p>當前時間日期為{{curDate|date}}</p>
<!-- 管道參數(shù)化：當前時間日期為2022/04/20 -->
<p>當前時間日期為{{curDate|date:"yyyy/MM/dd"}}</p>
<!-- title = "Hello World!"; -->
<!-- 轉大寫HELLO WORLD! -->
<p>轉大寫{{title|uppercase}}</p>
<!-- 轉小寫hello world! -->
<p>轉小寫{{title|lowercase}}</p>
<!-- 轉換金額字符串$0.26 -->
<p>轉換金額字符串{{0.259|currency}}</p>
<!-- 轉換金額百分比26% -->
<p>轉換金額百分比{{0.259|percent}}</p>2.2 鏈式管道
鏈式管道：管道以多個條件指定格式輸出。
<!-- 當前時間日期為wednesday, april 20, 2022 -->
<p>當前時間日期為{{curDate|date:'fullDate'|lowercase}}</p>2.3 自定義管道
自定義管道：在app.module文件的declarations中進行聲明就可以在任何一個組件中使用了。
<!-- 600000毫秒真實時間：00天00時10分00秒 -->
<p>600000毫秒真實時間：{{600000|TimeFormater}}</p>import { PipeTransform, Pipe } from '@angular/core';
@Pipe({
name: 'TimeFormater',
})
export class TimeFormaterPipe implements PipeTransform {
// // 傳入的是一個一毫秒為單位的時間數(shù)
transform(value) {
if (!value || value <= 0) {
return '00天00時00分00秒';
}
const time = Math.abs(value);
const transecond = Math.round(time / 1000); // 轉化為秒
const day = Math.floor(transecond / 3600 / 24); // 獲取天數(shù)
const hour = Math.floor((transecond / 3600) % 24); // 獲取小時，取余代表不滿一天那部分
const minute = Math.floor((transecond / 60) % 60); // 獲取分，取余代表不滿小時那部分
const second = transecond % 60;
return `${this.formatTime(day)}天${this.formatTime(hour)}時${this.formatTime(minute)}分${this.formatTime(second)}秒`;
}
formatTime(t) {
return t < 10 ? '0' + t : '' + t;
}
}3 Angular的三大綁定
3.1屬性綁定
屬性綁定的屬性指的是元素、組件、指令的屬性。屬性的綁定是單向綁定，從組件的屬性流動到目標元素的屬性。
<!--屬性綁定圖片路徑，動態(tài)獲取--> <img [src]="imgUrl">
3.2 attribute、class和style綁定
attribute綁定：并非所有屬性都有可供屬性綁定。是HTML標簽上的特性，它的值只能夠是字符串。通過attr.特性名綁定。而比如標簽中的id、src等這些屬于Property（屬性，DOM中的屬性，是JavaScript里的對象），這些可以直接綁定就可。而attribute綁定如下：
<table [border]="1"> <tr><td id="attr" [attr.colspan]="1+1">One-Two</td></tr> <tr><td>Five</td><td>Six</td></tr> </table>
class的綁定：靜態(tài)綁定、單一屬性動態(tài)綁定方式、多屬性動態(tài)綁定方式、ngCLass指令綁定。
.test1{
width: 100px;
height: 100px;
border: 1px solid;
}
.test2{
width: 100px;
height: 100px;
background-color: yellowgreen;
}（1）靜態(tài)綁定：可以是一個，也可以是多個，多個的class就會融合起來。
<div class="test1"></div> <div class="test1 test2"></div> <!--多個樣式會重疊-->
<div [class]="'test1'"></div> <div [class]="'test1 test2'"></div>
（2）單一屬性動態(tài)綁定方式：取在css文件中定義好的樣式進行綁定，class.樣式的class名。
<div [class.test1]="true"></div> <div [class.test2]="true"></div>
（3）多屬性動態(tài)綁定方式：class的綁定
<div [class]="moreClass"></div> <div [ngClass]="moreClass"></div>
moreClass:object = {
'test1':true,
'test2':true
}style的綁定：單一樣式綁定、帶單位的單一樣式綁定、多個樣式綁定。 （1）單一樣式的綁定
<div [style.width]="'200px'"></div>
（2）帶單位的單一樣式綁定
<div [style.width.px]="'200'"></div>
（3）多個樣式綁定
`<div [style]="moreStyle">綁定多個形式的style</p>`
moreStyle:string = 'width: 100px;height: 200px';
3.3 事件綁定
事件綁定：帶()的特性就是事件綁定。括號內(nèi)代表的是目標事件。而下面例子的事件綁定就是點擊事件的綁定。
<button (click)="save()"></button>
（1）目標事件是原生DOM元素事件，input是DOM元素input的原生事件。
//html
<input [value]="currentUser.name" (input)="getValue($event)">
//js
currentUser={
'name':''
}
getValue(ev:any){
this.currentUser.name = ev.target.value;
console.log(this.currentUser.name);
}（2）目標事件是指令：比如ngClick、ngDblclick等。
（3）目標事件是自定義事件。目標事件 (子組件的EventEmitter實例變量)="父組件的方法(子組件數(shù)據(jù))"下文的父子組件通信已經(jīng)有詳解。
4 Angular的三大指令
4.1 屬性型指令
屬性型指令：該指令可改變元素、組件或其他指令的外觀和行為。比如：
ngClass指令：可以通過動態(tài)地添加或移除css類來控制css來如何顯示。
ngStyle指令：可以同時設置多個內(nèi)聯(lián)樣式。
ngModel指令：可以雙向綁定到HTML表單中的元素。
創(chuàng)建屬性型指令：在app.module文件中的declarations數(shù)組中進行聲明就可以在任何組件的標簽元素中調(diào)用，如下：
<p appHighlight>看一下指令</p>
// Directive:在declarations
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el:ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el:ElementRef) {
}
// 監(jiān)聽鼠標懸浮背景顏色設置
@HostListener('mouseenter') onMouseEnter(){
this.hightlight('yellow');
}
// 監(jiān)聽鼠標離開背景顏色設置
@HostListener('mouseleave') onMouseLeave(){
this.hightlight('');
}
private hightlight(color:string){
this.el.nativeElement.style.backgroundColor = color;
}
}4.2 結構型指令
結構型指令：該指令通過添加或移除DOM元素來改變DOM布局。每一個宿主元素都只能有一個結構型指令。比如ngif和ngfor不能在同一元素出現(xiàn)。如ngif、ngfor、ngSwitch（本身是屬性型指令，它控制了兩個結構型指令ngSwitchCase和ngSwitchDefault），結構型指令一般都是帶***符號的**。
自定義結構型指令：
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[appTagdisplay]'
})
export class TagdisplayDirective {
private hasView = false;
// ViewContainerRef訪問視圖容器
constructor(private templateRef:TemplateRef<any>,private viewContainer:ViewContainerRef) { }
@Input() set appTagdisplay(condition:boolean){
if(!condition&&!this.hasView){
// 視圖容器創(chuàng)建一個內(nèi)嵌的視圖
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;
}else if(condition&&this.hasView){
// 清除該容器，銷毀該視圖
this.viewContainer.clear();
this.hasView = false;
}
}
}<div> <h2>自定義結構指令</h2> <p *appTagdisplay="false"> 該段顯示，因為appTagdisplay為false </p> <p *appTagdisplay="true"> 該段不顯示，因為appTagdisplay為true </p> </div>
4.3 組件
組件：也是一種指令，該指令擁有模板。
5 Angular的五大組件通信
5.1 Input與Output實現(xiàn)父子組件通信
通過下面的例子我們會發(fā)現(xiàn)Input和Output的操作都在子組件中。父傳子：在父組件中動態(tài)綁定屬性，在子組件中Input獲取父組件傳來的屬性。子傳父：子組件創(chuàng)建一個實例化EventEmitter對象，EventEmitter 的核心就是事件觸發(fā)與事件監(jiān)聽器功能的封裝；父組件：通過事件綁定調(diào)用帶參自定義函數(shù)接受子組件傳來的數(shù)據(jù)（自定義函數(shù)的參數(shù)）。
父組件：雙向綁定fatherData也就是當前輸入框輸入的信息，點擊發(fā)送事件觸發(fā)傳給子組件的currentData添加數(shù)據(jù)并清空當前輸入框的信息。
<div class="chan">
<div class="father">
<ng-container *ngIf="!isClear">
<div *ngFor="let item of currentData">
<span>{{item}}</span>
</div>
</ng-container>
<div class="footer">
<input style="width:178px" [(ngModel)]="fatherData"/>
<button (click)="send()">發(fā)送</button>
<button (click)="isClear=true">清空記錄</button>
</div>
</div>
<app-son [dataSource]="currentData" (sonSend)="getSonInfo($event)"></app-son>
</div>import { Component, OnInit } from '@angular/core';
export class FatherComponent implements OnInit {
isClear:boolean=false;
fatherData:any;
currentData:Array<any>=[];
constructor() { }
ngOnInit() {
this.fatherData = this.currentData;
}
send(){
this.currentData.push("我是父組件的數(shù)據(jù)："+this.fatherData);
this.fatherData='';
}
getSonInfo(event:any){
this.currentData.push("我是子組件的數(shù)據(jù)："+event);
}
}子組件：輸入框輸入sonData，點擊發(fā)送事件觸發(fā)子組件事件發(fā)射數(shù)據(jù)，然后父組件就可以通過子組件綁定的事件發(fā)射從父組件通過事件方法獲取當前子組件發(fā)送的數(shù)據(jù)。
<div class="son">
<ng-container *ngIf="!isClear">
<div *ngFor="let item of currentData">
<span>{{item}}</span>
</div>
</ng-container>
<div class="footer">
<input style="width:178px" [(ngModel)]="sonData"/>
<button (click)="send()">發(fā)送</button>
<button (click)="isClear=true">清空記錄</button>
</div>
</div>import { OnInit } from '@angular/core';
export class SonComponent implements OnInit{
@Input() dataSource:any=0;
@Output() sonSend = new EventEmitter<any>();
isClear:boolean=false;
sonData:any;
currentData:Array<any>=[];
constructor() { }
ngOnInit(): void {
this.currentData = this.dataSource;
}
send(){
this.sonSend.emit(this.sonData);
// this.currentData.push("我是子組件的數(shù)據(jù)："+this.sonData);
this.sonData='';
}
}
5.2 通過本地變量實現(xiàn)父子組件的通信
在父組件的模板中創(chuàng)建一個代表子組件的本地變量，通過調(diào)用這個變量就可以調(diào)用子組件中的屬性和方法。
<div>我是父組件</div>
<div>子組件：{{sonTpl.myName}}</div>
<app-son #sonTpl></app-son>5.3 通過@ViewChild實現(xiàn)父子組件的通信
父組件的js中定義@ViewChild(SonComponent) childTpl: any;，注意在html必須要調(diào)用子組件元素，不然會直接報錯，且不能直接調(diào)用childTpl.myName獲取子組件中的變量。
<div>我是父組件</div> <button (click)="childTpl.getName()">子組件按鈕</button> <app-son></app-son>
// 子組件中的getName
getName(){
console.log('我是子組件的getName方法');
}5.4 通過共享服務Service實現(xiàn)非父子組件通信
Service服務：主要控制準備開始、和確認按鈕的動作進行消息的傳遞。注意這個服務的定義一定是共享的，不要在各個組件下獨自注入providers中，因為單獨引入service只是在當前組件有效，每個組件調(diào)用一次都是獨立的，互不影響，這就不是組件通信需要的。
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MissionService {
// 源
private missionAnnounceSource = new Subject<string>();
private misssionConfirmedSource = new Subject<string>();
// 流
// asObservable:可觀察的序列，隱藏源序列的身份。
missionAnnounce$ = this.missionAnnounceSource.asObservable();
missionConfirm$ = this.misssionConfirmedSource.asObservable();
constructor() {}
announceMission(mission:string){
this.missionAnnounceSource.next(mission);
}
confirmMission(astronaut:string){
this.misssionConfirmedSource.next(astronaut);
}
}MissioncontrolComponent：這是一個主要界面的組件，在界面中調(diào)用了astronaut組件。當前組件就是父組件，而astronaut組件就是一個子組件。
import { Component, OnInit } from '@angular/core';
import { MissionService } from 'src/app/service/mission.service';
@Component({
selector: 'app-missioncontrol',
template: `<h3>導彈控制器</h3>
<button (click)="announce()">準備開始</button>
<app-astronaut *ngFor="let item of astronauts" [astronaut]="item">
</app-astronaut>
<h4>日志</h4>
<ul>
<li *ngFor="let event of history">{{event}}</li>
</ul>
`,
})
export class MissioncontrolComponent implements OnInit {
astronauts = ['操作員1','操作員2','操作員3'];
history:string[] = [];
missions = ['發(fā)射導彈'];
nextMession = 0;
constructor(private misssionSvc:MissionService) {
// 獲取子組件保存的信息，獲取是哪一個操作員點擊確認了
misssionSvc.missionConfirm$.subscribe((astronaut)=>{
this.history.push(`${astronaut}已經(jīng)確認`);
})
}
announce(){
let mission = this.missions[this.nextMession++];
this.misssionSvc.announceMission(mission);
this.history.push(`任務"${mission}"進入準備`);
if(this.nextMession>=this.missions.length){
this.nextMession = 0;
}
}
ngOnInit(): void {
}
}AstronautComponent：點擊確認，向父組件傳遞確認的操作員信息。
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { MissionService } from 'src/app/service/mission.service';
@Component({
selector: 'app-astronaut',
template: `
<p>
{{astronaut}}:<strong>{{mission}}</strong><button (click)="confirm()" [disabled]="!announced||confirmed">確認</button>
</p>
`,
})
export class AstronautComponent implements OnInit,OnDestroy{
@Input() astronaut:string='';
mission = '<沒有任務>';
confirmed = false;
announced = false;
subscription:Subscription;
constructor(private missionSvc:MissionService) {
// 獲取父組件的數(shù)據(jù)
this.subscription = missionSvc.missionAnnounce$.subscribe((mission)=>{
this.mission = mission;// 發(fā)射導彈
this.announced = true;// 激活確認按鈕
this.confirmed = false;
})
}
confirm(){
// 禁用按鈕
this.confirmed = true;
// 點擊確認，保存當前的操作員數(shù)據(jù)
this.missionSvc.confirmMission(this.astronaut);
}
ngOnDestroy(): void {
// 防止內(nèi)存泄漏
this.subscription.unsubscribe();
}
ngOnInit() {
}
}5.5 路由傳值
按鈕點擊跳轉：路由傳參數(shù)由分號隔開。
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-father',
template:`<button (click)="linkSon()">按鈕跳到兒子組件中</button>`
})
export class FatherComponent implements OnInit {
obj:any=[
'書悟空',
'唐僧',
];
constructor(private router:Router) {}
ngOnInit() {}
linkSon(){
this.router.navigate(['/son',{ name:this.obj,id:10010}]);
//http://localhost:4209/son;name=書悟空,唐僧;id=10010
}
}// private route:ActivatedRoute
this.route.params.subscribe((route)=>{
console.log(route);
})鏈接點擊跳轉：路由傳參通過queryParams屬性控制，由?、&符號分隔開。
<a [routerLink]="['/son']" [queryParams]="{id:10010,name:this.obj}">鏈接跳到兒子組件中</a>
// http://localhost:4209/son?id=10010&name=書悟空&name=唐僧// private route:ActivatedRoute
this.route.queryParams.subscribe((route)=>{
console.log(route);
})鏈接點擊跳轉：直接是用/分割路由傳參。
{ path: 'son/:id', component: SonComponent },<a [routerLink]="['/son',10010]">鏈接跳到兒子組件中</a> // http://localhost:4209/son/10010
// private route:ActivatedRoute
this.route.params.subscribe((route)=>{
console.log(route);
})還有其他通信方式：瀏覽器本地傳值（localStorge、SessionStorge）、cookie
6 Angular的八大生命周期
6.1 ngOnChanges()
當angular檢測到組件（或指令）重新設置數(shù)據(jù)綁定輸入屬性時響應。在被綁定的輸入屬性的值發(fā)生變化時調(diào)用，首次調(diào)用一定會發(fā)生在ngOnInit()之前，每一次改變綁定數(shù)據(jù)就調(diào)用一次這個鉤子。OnChanges()對應的函數(shù) ngOnChanges()，該函數(shù)獲取了一個對象，對象把每個發(fā)生變化的屬性名映射在SimpleChange對象中，對象有屬性當前值currentValue和前一個值previousValue。
父組件：
<!--父組件html-->
<div>
<span>我是父組件：</span>
<input [(ngModel)]="dataSource"/>
<span style="margin-left: 20px;">{{dataSource}}</span>
</div>
<div style="height: 20px;"></div>
<app-two [data]="dataSource"></app-two>子組件：
<!--子組件TwoComponent html-->
<div>
<span>我是子組件：</span>
<button (click)="increment()">+</button>
<span style="margin: 0 20px;">{{data}}</span>
<button (click)="decrement()">-</button>
</div>import { Component, Input, OnInit, SimpleChanges, OnChanges } from '@angular/core';
// 子組件js
export class TwoComponent implements OnInit,OnChanges {
@Input() data:any=0;
constructor() { }
ngOnInit(): void {
console.log('ngOnInit',this.data);
}
increment(){
this.data++;
}
decrement(){
this.data--;
}
ngOnChanges(changes: SimpleChanges): void {
console.log("previousValue：",changes['data'].previousValue);
console.log("currentValue：",changes['data'].currentValue);
}
}注意地，在子組件中操作是不能觸發(fā)Onchanges鉤子函數(shù)地，它是控制組件上屬性的改變而觸發(fā)。
6.2 ngOnInit()
在Angular第一次顯示數(shù)據(jù)綁定和設置指令/組件的輸入屬性之后，初始化指令/組件，在第一輪ngOnChanges()完成之后調(diào)用，只調(diào)用一次。
6.3 ngDoCheck()
檢測變化，在每一個Angular變更檢測周期（變化監(jiān)測）中調(diào)用，在執(zhí)行ngOnChanges和ngOnInit()方法之后調(diào)用。不管是數(shù)據(jù)綁定還是鼠標的點擊事件，只要觸發(fā)了都會觸發(fā)這個鉤子的調(diào)用。
<div>
<input [(ngModel)]="dataSource"/>
<span style="margin-left: 20px;">{{dataSource}}</span>
</div>import { DoCheck,OnInit } from '@angular/core';
export class SonComponent implements OnInit,DoCheck {
dataSource:any;
constructor() { }
ngOnInit(): void {
console.log("ngOnInit!");
}
ngDoCheck(): void {
console.log("DoCheck：",this.dataSource);
}
}
6.4 ngAfterContentInit()
把內(nèi)容投影進組件之后調(diào)用，在第一次執(zhí)行ngDoCheck方法之后調(diào)用，只調(diào)用一次。
import { AfterContentChecked, AfterContentInit,DoCheck, Input, OnInit } from '@angular/core';
export class SonComponent implements OnInit,DoCheck,AfterContentInit{
@Input() data:any=0;
dataSource:any;
constructor() { }
ngOnInit(): void {
console.log("ngOnInit!");
}
ngAfterContentInit(): void {
console.log("ngAfterContentInit!",this.dataSource);
}
ngDoCheck(): void {
console.log("DoCheck：",this.dataSource);
}
}
6.5 ngAfterContentChecked()
在每次完成被投影組件內(nèi)容的變更檢測之后調(diào)用。在執(zhí)行ngAfterContentInit()和ngDoCheck()方法之后調(diào)用。
import { AfterContentChecked, AfterContentInit, DoCheck, Input, OnInit } from '@angular/core';
export class SonComponent implements OnInit,DoCheck,AfterContentInit,AfterContentChecked{
@Input() data:any=0;
dataSource:any;
constructor() { }
ngOnInit(): void {
console.log("ngOnInit!");
}
ngAfterContentInit(): void {
console.log("ngAfterContentInit!",this.dataSource);
}
ngAfterContentChecked(): void {
console.log("ngAfterContentChecked!",this.dataSource);
}
ngDoCheck(): void {
console.log("DoCheck：",this.dataSource);
}
}
6.6 ngAfterViewInit()
在初始化完組件視圖及其子視圖之后調(diào)用，在第一次執(zhí)行ngAfterContentChecked()方法之后調(diào)用，只調(diào)用一次。
export class SonComponent implements OnInit,DoCheck,AfterContentInit,AfterContentChecked,AfterViewInit{
dataSource:any;
constructor() { }
ngOnInit(): void {
console.log("ngOnInit!");
}
ngAfterContentInit(): void {
console.log("ngAfterContentInit!",this.dataSource);
}
ngAfterContentChecked(): void {
console.log("ngAfterContentChecked!",this.dataSource);
}
ngAfterViewInit(): void {
console.log("ngAfterViewInit!");
}
ngDoCheck(): void {
console.log("DoCheck：",this.dataSource);
}
}
6.7 ngAfterViewChecked()
在每次完成組件視圖和子視圖的變更檢測之后調(diào)用。在執(zhí)行ngAfterViewInit()和ngAfterContentChecked()方法之后調(diào)用。
6.8 ngOnDestroy()
在Angular每次銷毀指令/組件之前調(diào)用并清掃，在這里反訂閱可觀察對象和分離事件處理器，以防內(nèi)存泄漏。什么時候會調(diào)用這個生命周期呢？也就是平時我們切換組件或從一個組件跳轉到另一個組件的時候，這時候就會觸發(fā)組件的銷毀。
關于“Angular表單、管道、綁定、指令、通信和周期源碼分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Angular表單、管道、綁定、指令、通信和周期源碼分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站標題：Angular表單、管道、綁定、指令、通信和周期源碼分析
URL地址：http://www.rwnh.cn/article8/igjpop.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、用戶體驗、Google、網(wǎng)站排名、響應式網(wǎng)站、網(wǎng)站建設
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 用戶體驗其實就這么簡單！ 2022-06-07
- 想要做好品牌網(wǎng)站設計的4個要點 2022-01-09
- 金融網(wǎng)站建設競爭力,品牌網(wǎng)站設計新趨勢 2014-06-08
- 怎樣做成都品牌網(wǎng)站設計才有效果？ 2016-12-27
- 好的品牌網(wǎng)站設計兩大要點必知 2022-06-10
- 品牌網(wǎng)站設計中運用到的首頁色彩和框架 2023-02-16
- 品牌網(wǎng)站設計要遵守哪些原則 2023-03-11
- 品牌網(wǎng)站設計都需要一個“新聞工具包” 2023-03-02
- 北京網(wǎng)站建設公司對于品牌網(wǎng)站設計的理念 2022-05-02
- 品牌網(wǎng)站設計開發(fā)要點 2016-11-09
- 如何做好品牌網(wǎng)站設計，成都網(wǎng)站建設公司來幫您。 2022-08-20
- 如何制作自己的網(wǎng)站 品牌網(wǎng)站設計技巧 2021-05-28