AngularJS 的生命周期和基础语法

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 = true

app.component.html 中写 if 判断

<p *ngIf="isShow">这个测试一个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('这是一个测试框!')}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</button><p *ngIf="isShow">这个测试一个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 />

在这里插入图片描述
点击按钮

在这里插入图片描述

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:Array<string> = ['死生契阔,与子成说','执子之手,与子偕老','我心匪石,不可转也','有一美人兮,见之不忘']
}

app.component.html

<button (click)="add()">添加按钮</button>
<button (click)="add2($event)">添加按钮2</button><p *ngIf="isShow">这个测试一个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('这是一个测试框!')}add2(e:MouseEvent){console.log(e)}isShow : boolean = trueisShow2 : boolean = truechangeShow(){this.isShow2 = !this.isShow2}myList:Array<string> = ['死生契阔,与子成说','执子之手,与子偕老','我心匪石,不可转也','有一美人兮,见之不忘']author:number = 0changAuthor() {this.author =   this.author+1console.log(this.author)}
}

app.component.html


<button (click)="add()">添加按钮</button>
<button (click)="add2($event)">添加按钮2</button><p *ngIf="isShow">这个测试一个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>这是默认{{author}}</p>
</div><p>&#64; switch 形式</p>@switch (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';

并在 @Componentimport 中添加 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:Array<string> = ['死生契阔,与子成说','执子之手,与子偕老','我心匪石,不可转也','有一美人兮,见之不忘']author:number = 0changAuthor() {this.author =   this.author+1console.log(this.author)}testString:string='test001'
}

app.component.html


<button (click)="add()">添加按钮</button>
<button (click)="add2($event)">添加按钮2</button><p *ngIf="isShow">这个测试一个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>这是默认{{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)] 实际上展开为:

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

这里有两个关键部分:

  • [ngModel]=“testString”:这是一个属性绑定,它将 ngModel 的值设置为组件的 testString
    属性。这意味着当 testString 在组件类中改变时,ngModel 的值(即输入框的值)也会自动更新。
  • (ngModelChange)=“testString=$event”:这是一个事件绑定,它监听 ngModelChange
    事件。当输入框的值改变时,这个事件会被触发,并将新的值作为 $event 传递给事件处理器。事件处理器将 $event 的值赋给testString,从而实现了从视图到组件的数据更新。

所以,当你在输入框中键入文本时,这个文本会立即反映到 testString 属性上,反之亦然,如果你在组件类中改变 testString 的值,输入框的内容也会相应更新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/5787.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows下载MingGW

因为要配置vscode的c/c环境&#xff0c;需要下载一个编译器&#xff0c;gcc官方推荐开源的MingGW-W64&#xff0c;看了几个下载方法&#xff0c;决定用最简单的离线安装。 niXman/mingw-builds-binaries/releases 32位的操作系统&#xff1a;i686&#xff0c;64位的操作系统&a…

富格林:可信方略杜绝交易虚假

富格林指出&#xff0c;黄金市场是一个极具诱惑力的市场&#xff0c;它是在一个大家共同认可的游戏规则下&#xff0c;凭借自己可信的决策、判断来进行交易的一种投资市场。黄金市场不断有新手投资者的加入&#xff0c;但是要真正在该市场上获利&#xff0c;杜绝虚假套路是一个…

linux的常见命令

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Linux ⛺️稳中求进&#xff0c;晒太阳 Linux中检查进程是否存在&#xff1a; ps -ef | grep [进程名或进程ID] pgrep -f [进程名|进程ID] pidof [进程名] Linux中检查某个端口是否被…

外包干了3天,技术就明显退步了。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

rabbitMq 0 到1

前言 工作中MQ的使用场景是数不胜数&#xff0c;每个公司的技术选型又不太一样&#xff0c;用的哪个MQ&#xff0c;我们必须要先玩起来&#xff0c;RabbitMQ在windows安装遇到很多问题&#xff0c;博客也是五花八门&#xff0c;算了还是自己搞吧&#xff0c;记录一下&#xff…

机器视觉系统-同轴光源大小选择技巧

同轴光源多用于检测光滑平面产品上的缺陷&#xff0c;同样利用上述的方法计算得出光源尺寸。 实际上&#xff0c;同轴光源可理解为没有孔的开孔面光&#xff0c;因此可等效为发光面相等的面光源&#xff0c;如下图&#xff1a; 如图所示&#xff0c;同轴光源的效果与开孔面光的…

004 springCloudAlibaba Gateway

文章目录 gatewayServerGatewayServerApplication.javaServletInitializer.javaapplication.yamlpom.xml orderServerOrderController.javaProductClient.javaOrderServerApplication.javaServletInitializer.javaapplication.yamlpom.xml productServerProductController.java…

数论7-同余

点个关注吧&#xff0c;谢谢&#xff01; 后续将继续更新数论 一、定义 同余的概念很简单&#xff1a;给定三个整数 a , b , n a,b,n a,b,n&#xff0c;如果 n ∣ ( a − b ) n|(a-b) n∣(a−b)&#xff0c;那么 a a a模 n n n同余 b b b。记作 a b ( m o d n ) ab~(mod n) ab…

karpathy make more -- 4

1 Introduction 这个部分要完成一个网络的模块化&#xff0c;然后实现一个新的网络结构。 2 使用torch的模块化功能 2.1 模块化 将输入的字符长度变成8&#xff0c;并将之前的代码模块化 # Near copy paste of the layers we have developed in Part 3# -----------------…

PID控制技术有哪些?

PID&#xff08;比例-积分-微分&#xff09;控制是一种广泛使用的反馈控制技术&#xff0c;它通过调整控制系统的输入来使输出达到期望的设置值。PID控制器的三个组成部分—比例&#xff08;P&#xff09;、积分&#xff08;I&#xff09;和微分&#xff08;D&#xff09;—各自…

8. Django 表单与模型

8. 表单与模型 表单是搜集用户数据信息的各种表单元素的集合, 其作用是实现网页上的数据交互, 比如用户在网站输入数据信息, 然后提交到网站服务器端进行处理(如数据录入和用户登录注册等).网页表单是Web开发的一项基本功能, Django的表单功能由Form类实现, 主要分为两种: dj…

Odoo14修改登录界面,实现炫酷粒子效果

目录 原登录界面 最终效果 实现步骤 插件下载 原登录界面 最终效果 实现步骤 1 odoo创建插件web_login 2 在static目录下编写css和js文件 login.css代码 html, body {position:fixed;top:0px;left:0px;height:100%;width:100%;/*Fallback if gradeints dont work */b…

前端之实现大文件上传的解决方案———断点续传

介绍 断点续传是一种网络数据传输方式&#xff0c;允许从中断的地方恢复下载或上传操作&#xff0c;而不是从头开始。这对于大文件传输尤其有用&#xff0c;因为它可以节省时间并减少网络资源的浪费。在前端开发中&#xff0c;实现大文件的断点续传可以提升用户体验&#xff0c…

【项目学习01_2024.05.01_Day03】

学习笔记 3.6 开发业务层3.6.1 创建数据字典表3.6.2 编写Service3.6.3 测试Service 3.7 接口测试3.7.1 接口完善3.7.2 Httpclient测试 3.8 前后端联调3.8.1 准备环境3.8.2 安装系统管理服务3.8.3 解决跨域问题解决跨域的方法&#xff1a;我们准备使用方案2解决跨域问题。在内容…

hadoop学习---基于hive的航空公司客户价值的LRFCM模型案例

案例需求&#xff1a; RFM模型的复习 在客户分类中&#xff0c;RFM模型是一个经典的分类模型&#xff0c;模型利用通用交易环节中最核心的三个维度——最近消费(Recency)、消费频率(Frequency)、消费金额(Monetary)细分客户群体&#xff0c;从而分析不同群体的客户价值。在某些…

CTFHub-Web-文件上传

CTFHub-Web-文件上传-WP 一、无验证 1.编写一段PHP木马脚本 2.将编写好的木马进行上传 3.显示上传成功了 4.使用文件上传工具进行尝试 5.连接成功进入文件管理 6.上翻目录找到flag文件 7.打开文件查看flag 二、前端验证 1.制作payload进行上传发现不允许这种类型的文件上传 …

手机测试之-adb

一、Android Debug Bridge 1.1 Android系统主要的目录 1.2 ADB工具介绍 ADB的全称为Android Debug Bridge,就是起到调试桥的作用,是Android SDK里面一个多用途调试工具,通过它可以和Android设备或模拟器通信,借助adb工具,我们可以管理设备或手机模拟器的状态。还可以进行很多…

算法学习笔记(最短路——Dijkstra)

D i j k s t r a Dijkstra Dijkstra是最常用&#xff0c;效率最高的最短路径算法&#xff0c;是单源最短路算法。核心是 B F S BFS BFS和贪心。 B F S BFS BFS传送门 D i j k s t r a Dijkstra Dijkstra大概分成以下几个步骤&#xff1a; 从起点出发扩展它的邻点。选择一个最近…

数字旅游以科技创新为核心:推动旅游服务的智能化、精准化、个性化,为游客提供更加贴心、专业、高效的旅游服务

目录 一、引言 二、数字旅游以科技创新推动旅游服务智能化 1、智能化技术的应用 2、提升旅游服务的效率和质量 三、数字旅游以科技创新推动旅游服务精准化 1、精准化需求的识别与满足 2、精准化营销与推广 四、数字旅游以科技创新推动旅游服务个性化 1、个性化服务的创…

FIFO Generate IP核使用——Native Ports页配置

在使用FIFO Generate IP核时&#xff0c;如果在Basic选项页选择了Naitve接口&#xff0c;就需要配置Native Ports页&#xff0c;该页提供了针对FIFO核心的性能选项&#xff08;读取模式&#xff09;、数据端口参数、ECC&#xff08;错误检查和纠正&#xff09;以及初始化选项。…