网站规划的类型,深圳网站制作公司人才招聘,国内最好景观设计公司排名,i岗网站建设AngularJS 的生命周期和基础语法 文章目录 AngularJS 的生命周期和基础语法1. 使用步骤2. 生命周期钩子函数3. 点击事件4. if 语句1. if 形式2. if else 形式 5. for 语句6. switch 语句7. 双向数据绑定 1. 使用步骤
// 1. 要使用哪个钩子函数#xff0c;就先引入
import { O…AngularJS 的生命周期和基础语法 文章目录 AngularJS 的生命周期和基础语法1. 使用步骤2. 生命周期钩子函数3. 点击事件4. if 语句1. if 形式2. if else 形式 5. for 语句6. switch 语句7. 双向数据绑定 1. 使用步骤
// 1. 要使用哪个钩子函数就先引入
import { OnInit } from ...
// 2. 再实现
export class 组件名 implements Onint...
// 3. 再使用
ngOnInit(){
....
}2. 生命周期钩子函数 ngOnChanges()
当输入属性的值发生变化时调用。
在组件被创建并且输入属性绑定发生变化时调用。首次调用一定会发生在ngOnInit()之前。
ngOnInit()
在组件初始化时调用。
通常用于执行初始化逻辑例如获取初始数据。在第一轮 ngOnchanges()完成之后调用只调用一次。
ngDoCheck()
当 Angular 安排检查时调用。 用于自定义的变更检测逻辑通常与 ChangeDetectorRef 结合使用。在ngOnChanges()和ngOnInit()之后。
ngAfterContentInit()
在组件内容投影完成后调用。 用于执行需要在组件内容初始化后执行的逻辑。第一次ngDoCheck()之后调用只调用一次只适用于组件。
ngAfterContentChecked()
在每次 Angular 完成对组件内容的检查之后调用。 用于执行在内容检查之后需要执行的逻辑。ngAfterContentInit()和每次ngDoCheck()之后调用只适用于组件。
ngAfterViewInit()
在组件视图初始化完成后调用。 用于执行需要访问视图的初始化逻辑。第一次ngAfterContentChecked()之后调用只调用一次只适合组件。
ngAfterViewChecked()
在每次 Angular 完成对组件视图的检查之后调用。 用于执行在视图检查之后需要执行的逻辑。ngAfterViewInit()和每次ngAfterContentChecked()之后调用只适合组件。
ngOnDestroy()
在组件销毁时调用。 通常用于清理资源取消订阅等。
3. 点击事件
将 app.component.html 文件内容清空只保留router-outlet/
在 app.component.html 中添加button标签并按下面代码添加点击事件
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(这是一个测试框)}add2(e:MouseEvent){console.log(e)}
}按钮1 按钮2 4. if 语句
1. if 形式
在 app.component.ts 中定义变量 isShow isShow : boolean trueapp.component.html 中写 if 判断
p *ngIfisShow这个测试一个bool值
/p2. 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(这是一个测试框)}add2(e:MouseEvent){console.log(e)}isShow : boolean trueisShow2 : boolean truechangeShow(){this.isShow2 !this.isShow2}
}app.component.html button (click)add()添加按钮/button
button (click)add2($event)添加按钮2/buttonp *ngIfisShow这个测试一个bool值
/pbutton (click)changeShow()修改show/buttonp第一种if写法/p
if (isShow2) {ptest3/p
}
else {ptest4/p
}
p第二种if写法/p
ng-container *ngIfisShow2;else elseTemplateptest1/p
/ng-container
ng-template #elseTemplateptest2/p
/ng-templaterouter-outlet /点击按钮 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(这是一个测试框)}add2(e:MouseEvent){console.log(e)}isShow : boolean trueisShow2 : boolean truechangeShow(){this.isShow2 !this.isShow2}myList:Arraystring [死生契阔与子成说,执子之手与子偕老,我心匪石不可转也,有一美人兮见之不忘]
}app.component.html
button (click)add()添加按钮/button
button (click)add2($event)添加按钮2/buttonp *ngIfisShow这个测试一个bool值
/pbutton (click)changeShow()修改show/buttonp第一种if写法/p
if (isShow2) {ptest3/p
}
else {ptest4/p
}
p第二种if写法/png-container *ngIfisShow2;else elseTemplateptest1/p
/ng-container
ng-template #elseTemplateptest2/p
/ng-templatep---------------------------/pp*ngFor 形式/pp *ngForlet item of myList let iindex [style.color]i % 2 0 ? red : blue{{i1}}.{{item}}
/pp #64; for 形式 /p
p11111111111111/pfor (item of myList; track item) {div{{item}}/div
}empty {empty myList
}p222222222222/pfor (item of myList; track $index) {p{{$index1}}、{{item}}/p
}p3333333333/pp---------------------------/prouter-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(这是一个测试框)}add2(e:MouseEvent){console.log(e)}isShow : boolean trueisShow2 : boolean truechangeShow(){this.isShow2 !this.isShow2}myList:Arraystring [死生契阔与子成说,执子之手与子偕老,我心匪石不可转也,有一美人兮见之不忘]author:number 0changAuthor() {this.author this.author1console.log(this.author)}
}
app.component.html button (click)add()添加按钮/button
button (click)add2($event)添加按钮2/buttonp *ngIfisShow这个测试一个bool值
/pbutton (click)changeShow()修改show/buttonp第一种if写法/p
if (isShow2) {ptest3/p
}
else {ptest4/p
}
p第二种if写法/png-container *ngIfisShow2;else elseTemplateptest1/p
/ng-container
ng-template #elseTemplateptest2/p
/ng-templatep---------------------------/pp*ngFor 形式/pp *ngForlet item of myList let iindex [style.color]i % 2 0 ? red : blue{{i1}}.{{item}}
/pp #64; for 形式 /p
p11111111111111/pfor (item of myList; track item) {div{{item}}/div
}empty {empty myList
}p222222222222/pfor (item of myList; track $index) {p{{$index1}}、{{item}}/p
}p3333333333/pp---------------------------/ppngSwitch 形式/p
button (click)changAuthor()修改作者/button
div [ngSwitch]author [style.color]author % 2 0 ? red : bluep *ngSwitchCase1这是switch1/pp *ngSwitchCase2这是switch2/pp *ngSwitchCase3这是switch3/pp *ngSwitchDefault这是默认{{author}}/p
/divp#64; switch 形式/pswitch (author) {case (1) {p若非群玉山头见 会向瑶台月下逢/p}case (2) {p春宵一刻值千值千金,花有清香月有阴/p}default {p情催桃李艳心寄管弦飞/p}
}
router-outlet /点击按钮 7. 双向数据绑定
实现双向数据绑定需要引入angular 内置的 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(这是一个测试框)}add2(e:MouseEvent){console.log(e)}isShow : boolean trueisShow2 : boolean truechangeShow(){this.isShow2 !this.isShow2}myList:Arraystring [死生契阔与子成说,执子之手与子偕老,我心匪石不可转也,有一美人兮见之不忘]author:number 0changAuthor() {this.author this.author1console.log(this.author)}testString:stringtest001
}
app.component.html button (click)add()添加按钮/button
button (click)add2($event)添加按钮2/buttonp *ngIfisShow这个测试一个bool值
/pbutton (click)changeShow()修改show/buttonp第一种if写法/p
if (isShow2) {ptest3/p
}
else {ptest4/p
}
p第二种if写法/png-container *ngIfisShow2;else elseTemplateptest1/p
/ng-container
ng-template #elseTemplateptest2/p
/ng-templatep---------------------------/pp*ngFor 形式/pp *ngForlet item of myList let iindex [style.color]i % 2 0 ? red : blue{{i1}}.{{item}}
/pp #64; for 形式 /p
p11111111111111/pfor (item of myList; track item) {div{{item}}/div
}empty {empty myList
}p222222222222/pfor (item of myList; track $index) {p{{$index1}}、{{item}}/p
}p3333333333/pp---------------------------/ppngSwitch 形式/p
button (click)changAuthor()修改作者/button
div [ngSwitch]author [style.color]author % 2 0 ? red : bluep *ngSwitchCase1这是switch1/pp *ngSwitchCase2这是switch2/pp *ngSwitchCase3这是switch3/pp *ngSwitchDefault这是默认{{author}}/p
/divp#64; switch 形式/pswitch (author) {case (1) {p若非群玉山头见 会向瑶台月下逢/p}case (2) {p春宵一刻值千值千金,花有清香月有阴/p}default {p情催桃李艳心寄管弦飞/p}
}input [(ngModel)]testString typetext {{testString}}input namefirstInput [(ngModel)]testString typetext stylewidth: 200px;
{{testString}} router-outlet /输入之后 这里解释一下
input [(ngModel)]testString typetext [(ngModel)] 实际上展开为
input [ngModel]testString (ngModelChange)testString$event typetext 这里有两个关键部分
[ngModel]“testString”这是一个属性绑定它将 ngModel 的值设置为组件的 testString 属性。这意味着当 testString 在组件类中改变时ngModel 的值即输入框的值也会自动更新。(ngModelChange)“testString$event”这是一个事件绑定它监听 ngModelChange 事件。当输入框的值改变时这个事件会被触发并将新的值作为 $event 传递给事件处理器。事件处理器将 $event 的值赋给testString从而实现了从视图到组件的数据更新。
所以当你在输入框中键入文本时这个文本会立即反映到 testString 属性上反之亦然如果你在组件类中改变 testString 的值输入框的内容也会相应更新。
