溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Angular表單、管道、綁定、指令、通信和周期源碼分析的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Angular表單、管道、綁定、指令、通信和周期源碼分析文章都會有所收獲，下面我們一起來看看吧。
模板驅(qū)動表單：引入FormsModule模塊，表單的控制邏輯都是寫在模板里的，每一個表單元素都是和一個負責管理內(nèi)部表單模型的指令關(guān)聯(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);
}
}響應(yīng)式表單：需要引入ReactiveFormsModule模塊，在響應(yīng)式表單中，視圖中的每個表單元素都直接鏈接到一個表單模型。
FormControl：是構(gòu)成表單的基本單位。實例用于追蹤單個表單控件的值和驗證狀態(tài)
FormGroup：用于追蹤一個表單控件組的值和狀態(tài)。
FormGroup和FormArray的區(qū)別：formgroup既可以代表表單一部分也可以代表整個表單；formarray有一個額外的長度屬性，它的formControl是沒有相關(guān)的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 };
}
};
}管道：把數(shù)據(jù)作為輸入，然后轉(zhuǎn)換它并給出輸出。
Angular的一些內(nèi)置管道：如date、uppercase、lowercase、currency、percent等，不用引入，直接在任何組件中使用。注意：用date轉(zhuǎn)化的數(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!"; -->
<!-- 轉(zhuǎn)大寫HELLO WORLD! -->
<p>轉(zhuǎn)大寫{{title|uppercase}}</p>
<!-- 轉(zhuǎn)小寫hello world! -->
<p>轉(zhuǎn)小寫{{title|lowercase}}</p>
<!-- 轉(zhuǎn)換金額字符串$0.26 -->
<p>轉(zhuǎn)換金額字符串{{0.259|currency}}</p>
<!-- 轉(zhuǎn)換金額百分比26% -->
<p>轉(zhuǎn)換金額百分比{{0.259|percent}}</p>鏈式管道：管道以多個條件指定格式輸出。
<!-- 當前時間日期為wednesday, april 20, 2022 -->
<p>當前時間日期為{{curDate|date:'fullDate'|lowercase}}</p>自定義管道：在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); // 轉(zhuǎn)化為秒
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;
}
}屬性綁定的屬性指的是元素、組件、指令的屬性。屬性的綁定是單向綁定，從組件的屬性流動到目標元素的屬性。
<!--屬性綁定圖片路徑，動態(tài)獲取--> <img [src]="imgUrl">
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';
事件綁定：帶()的特性就是事件綁定。括號內(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)有詳解。
屬性型指令：該指令可改變元素、組件或其他指令的外觀和行為。比如：
ngClass指令：可以通過動態(tài)地添加或移除css類來控制css來如何顯示。
ngStyle指令：可以同時設(shè)置多個內(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)聽鼠標懸浮背景顏色設(shè)置
@HostListener('mouseenter') onMouseEnter(){
this.hightlight('yellow');
}
// 監(jiān)聽鼠標離開背景顏色設(shè)置
@HostListener('mouseleave') onMouseLeave(){
this.hightlight('');
}
private hightlight(color:string){
this.el.nativeElement.style.backgroundColor = color;
}
}結(jié)構(gòu)型指令：該指令通過添加或移除DOM元素來改變DOM布局。每一個宿主元素都只能有一個結(jié)構(gòu)型指令。比如ngif和ngfor不能在同一元素出現(xiàn)。如ngif、ngfor、ngSwitch（本身是屬性型指令，它控制了兩個結(jié)構(gòu)型指令ngSwitchCase和ngSwitchDefault），結(jié)構(gòu)型指令一般都是帶***符號的**。
自定義結(jié)構(gòu)型指令：
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>自定義結(jié)構(gòu)指令</h2> <p *appTagdisplay="false"> 該段顯示，因為appTagdisplay為false </p> <p *appTagdisplay="true"> 該段不顯示，因為appTagdisplay為true </p> </div>
組件：也是一種指令，該指令擁有模板。
通過下面的例子我們會發(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='';
}
}
在父組件的模板中創(chuàng)建一個代表子組件的本地變量，通過調(diào)用這個變量就可以調(diào)用子組件中的屬性和方法。
<div>我是父組件</div>
<div>子組件：{{sonTpl.myName}}</div>
<app-son #sonTpl></app-son>父組件的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方法');
}Service服務(wù)：主要控制準備開始、和確認按鈕的動作進行消息的傳遞。注意這個服務(wù)的定義一定是共享的，不要在各個組件下獨自注入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(`任務(wù)"${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 = '<沒有任務(wù)>';
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() {
}
}按鈕點擊跳轉(zhuǎn)：路由傳參數(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);
})鏈接點擊跳轉(zhuǎn)：路由傳參通過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);
})鏈接點擊跳轉(zhuǎn)：直接是用/分割路由傳參。
{ 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
當angular檢測到組件（或指令）重新設(shè)置數(shù)據(jù)綁定輸入屬性時響應(yīng)。在被綁定的輸入屬性的值發(fā)生變化時調(diào)用，首次調(diào)用一定會發(fā)生在ngOnInit()之前，每一次改變綁定數(shù)據(jù)就調(diào)用一次這個鉤子。OnChanges() 對應(yīng)的函數(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ā)。
在Angular第一次顯示數(shù)據(jù)綁定和設(shè)置指令/組件的輸入屬性之后，初始化指令/組件，在第一輪ngOnChanges()完成之后調(diào)用，只調(diào)用一次。
檢測變化，在每一個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);
}
}
把內(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);
}
}
在每次完成被投影組件內(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);
}
}
在初始化完組件視圖及其子視圖之后調(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);
}
}
在每次完成組件視圖和子視圖的變更檢測之后調(diào)用。在執(zhí)行ngAfterViewInit()和ngAfterContentChecked()方法之后調(diào)用。
在Angular每次銷毀指令/組件之前調(diào)用并清掃，在這里反訂閱可觀察對象和分離事件處理器，以防內(nèi)存泄漏。什么時候會調(diào)用這個生命周期呢？也就是平時我們切換組件或從一個組件跳轉(zhuǎn)到另一個組件的時候，這時候就會觸發(fā)組件的銷毀。
關(guān)于“Angular表單、管道、綁定、指令、通信和周期源碼分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Angular表單、管道、綁定、指令、通信和周期源碼分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼