AngularJS 的生命周期和基础语法使用详解
目录
AngularJS 的生命周期和基础语法
1. 使用步骤
// 1. 要使用哪个钩子函数，就先引入
import { OnInit } from ...
// 2. 再实现
export class 组件名 implements Onint...
// 3. 再使用
ngOnInit(){
....
}
2. 生命周期钩子函数
当输入属性的值发生变化时调用。
在组件被创建并且输入属性绑定发生变化时调用。首次调用一定会发生在ngOnInit()之前。
在组件初始化时调用。
通常用于执行初始化逻辑，例如获取初始数据。在第一轮 ngOnchanges()完成之后调用，只调用一次。
当 Angular 安排检查时调用。
用于自定义的变更检测逻辑，通常与 ChangeDetectorRef 结合使用。在ngOnChanges()和ngOnInit()之后。
在组件内容投影完成后调用。
用于执行需要在组件内容初始化后执行的逻辑。第一次ngDoCheck()之后调用，只调用一次，只适用于组件。
在每次 Angular 完成对组件内容的检查之后调用。
用于执行在内容检查之后需要执行的逻辑。ngAfterContentInit()和每次ngDoCheck()之后调用，只适用于组件。
在组件视图初始化完成后调用。
用于执行需要访问视图的初始化逻辑。第一次ngAfterContentChecked()之后调用，只调用一次，只适合组件。
在每次 Angular 完成对组件视图的检查之后调用。
用于执行在视图检查之后需要执行的逻辑。ngAfterViewInit()和每次ngAfterContentChecked()之后调用，只适合组件。
在组件销毁时调用。
通常用于清理资源，取消订阅等。
3. 点击事件
将 文件内容清空，只保留
在 中添加标签，并按下面代码添加点击事件
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: 'http://www.jb51.net/javascript/app.component.html',
styleUrl: 'http://www.jb51.net/javascript/app.component.css'
})
export class AppComponent {
title = 'testDemo';
add(){
alert('这是一个测试框！')
}
add2(e:MouseEvent){
console.log(e)
}
}
按钮1
按钮2
4. if 语句
1. if 形式
在 中定义变量 isShow
isShow : boolean = true
中写 if 判断
这个测试一个bool值！
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: 'http://www.jb51.net/javascript/app.component.html',
styleUrl: 'http://www.jb51.net/javascript/app.component.css'
})
export class AppComponent {
title = 'testDemo';
add(){
alert('这是一个测试框！')
}
add2(e:MouseEvent){
console.log(e)
}
isShow : boolean = true
isShow2 : boolean = true
changeShow(){
this.isShow2 = !this.isShow2
}
}
app.component.html
这个测试一个bool值！
第一种if写法
@if (isShow2) {
test3
}
@else {
test4
}
第二种if写法
test1
test2
点击按钮
5. for 语句
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: 'http://www.jb51.net/javascript/app.component.html',
styleUrl: 'http://www.jb51.net/javascript/app.component.css'
})
export class AppComponent {
title = 'testDemo';
add(){
alert('这是一个测试框！')
}
add2(e:MouseEvent){
console.log(e)
}
isShow : boolean = true
isShow2 : boolean = true
changeShow(){
this.isShow2 = !this.isShow2
}
myList:Array
'死生契阔，与子成说',
'执子之手，与子偕老',
'我心匪石，不可转也',
'有一美人兮，见之不忘'
]
}
这个测试一个bool值！
第一种if写法
@if (isShow2) {
test3
}
@else {
test4
}
第二种if写法
test1
test2
---------------------------
*ngFor 形式
{{i+1}}.{{item}}
@ for 形式
11111111111111
@for (item of myList; track item) {
{{item}}
}@empty {
empty myList
}
222222222222
@for (item of myList; track $index) {
{{$index+1}}、{{item}}
}
3333333333
---------------------------
6. switch 语句
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: 'http://www.jb51.net/javascript/app.component.html',
styleUrl: 'http://www.jb51.net/javascript/app.component.css'
})
export class AppComponent {
title = 'testDemo';
add(){
alert('这是一个测试框！')
}
add2(e:MouseEvent){
console.log(e)
}
isShow : boolean = true
isShow2 : boolean = true
changeShow(){
this.isShow2 = !this.isShow2
}
myList:Array
'死生契阔，与子成说',
'执子之手，与子偕老',
'我心匪石，不可转也',
'有一美人兮，见之不忘'
]
author:number = 0
changAuthor() {
this.author = this.author+1
console.log(this.author)
}
}
这个测试一个bool值！
第一种if写法
@if (isShow2) {
test3
}
@else {
test4
}
第二种if写法
test1
test2
---------------------------
*ngFor 形式
{{i+1}}.{{item}}
@ for 形式
11111111111111
@for (item of myList; track item) {
{{item}}
}@empty {
empty myList
}
222222222222
@for (item of myList; track $index) {
{{$index+1}}、{{item}}
}
3333333333
---------------------------
ngSwitch 形式
这是switch1
这是switch2
这是switch3
这是默认{{author}}
@ switch 形式
@switch (author) {
@case (1) {
若非群玉山头见 会向瑶台月下逢
}
@case (2) {
春宵一刻值千值千金,花有清香月有阴
}
@default {
情催桃李艳，心寄管弦飞
}
}
点击按钮
7. 双向数据绑定
实现双向数据绑定，需要引入angular 内置的 模块
在 文件中引入
import { FormsModule } from '@angular/forms';
并在 的 中添加
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: 'http://www.jb51.net/javascript/app.component.html',
styleUrl: 'http://www.jb51.net/javascript/app.component.css'
})
export class AppComponent {
title = 'testDemo';
add(){
alert('这是一个测试框！')
}
add2(e:MouseEvent){
console.log(e)
}
isShow : boolean = true
isShow2 : boolean = true
changeShow(){
this.isShow2 = !this.isShow2
}
myList:Array
'死生契阔，与子成说',
'执子之手，与子偕老',
'我心匪石，不可转也',
'有一美人兮，见之不忘'
]
author:number = 0
changAuthor() {
this.author = this.author+1
console.log(this.author)
}
testString:string='test001'
}
这个测试一个bool值！
第一种if写法
@if (isShow2) {
test3
}
@else {
test4
}
第二种if写法
test1
test2
---------------------------
*ngFor 形式
{{i+1}}.{{item}}
@ for 形式
11111111111111
@for (item of myList; track item) {
{{item}}
}@empty {
empty myList
}
222222222222
@for (item of myList; track $index) {
{{$index+1}}、{{item}}
}
3333333333
---------------------------
ngSwitch 形式
这是switch1
这是switch2
这是switch3
这是默认{{author}}
@ switch 形式
@switch (author) {
@case (1) {
若非群玉山头见 会向瑶台月下逢
}
@case (2) {
春宵一刻值千值千金,花有清香月有阴
}
@default {
情催桃李艳，心寄管弦飞
}
}
{{testString}}
{{testString}}
输入之后
这里解释一下
实际上展开为：
这里有两个关键部分：
所以，当你在输入框中键入文本时，这个文本会立即反映到 testString 属性上，反之亦然，如果你在组件类中改变 testString 的值，输入框的内容也会相应更新。
到此这篇关于AngularJS 的生命周期和基础语法的文章就介绍到这了,更多相关AngularJS 的生命周期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
- .NET Core系列之MemoryCache 初识
- 007手机一键Root(安机网一键Root) v3.0 官方最新版 一键ROOT您的Android手机
- 12306密码被盗了怎么办？12306密码外泄解决方法
- 12个字的qq网名
- 150M迷你型无线路由器怎么设置？
- 192.168.1.1打不开怎么办？路由器192.168.1.1打不开的原因以及解决办法
- 2011年电子报合订本 电子报 编辑部 中文 PDF版 [84M]
- 2015年1月15日小米新旗舰发布会现场图文直播
- 2016.3.1vivo Xplay5新品发布会现场视频直播 优酷直播
- 2016华为P9发布会视频直播地址 4月15日华为P9国行发布会直播