当前位置: 首页 > news >正文

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 的值,输入框的内容也会相应更新。

相关文章:

AngularJS 的生命周期和基础语法

AngularJS 的生命周期和基础语法 文章目录 AngularJS 的生命周期和基础语法1. 使用步骤2. 生命周期钩子函数3. 点击事件4. if 语句1. if 形式2. if else 形式 5. for 语句6. switch 语句7. 双向数据绑定 1. 使用步骤 // 1. 要使用哪个钩子函数&#xff0c;就先引入 import { O…...

docker-compose 网络

自定义网络 - HOST 与宿主机共享网络 version: "3" services:web:image: nginx:1.21.6restart: alwaysports:- 80:80network_mode: host自定义网络 - 固定ip version: "3" services:web:image: nginx:1.21.6restart: alwaysports:- 80:80networks:app&am…...

农药生产厂污废水如何处理达标

农药生产厂的污废水处理是确保该行业对环境的负面影响最小化的重要环节。下面是一些常见的处理方法和步骤&#xff0c;可以帮助农药生产厂的污废水达到排放标准&#xff1a; 预处理&#xff1a;将废水进行初步处理&#xff0c;去除大颗粒悬浮物和固体残渣。这可以通过筛网、沉淀…...

根据相同的key 取出数组中最后一个值

数组中有很多对象 , 需根据当前页面的值current 和 数组中的key对比 拿到返回值 数据结构如下 之前写法 const clickedItem routeList.find(item > item.key current) // current是当前页 用reduce遍历数组返回最后一个值 const clickedItem routeList.reduce((lastIte…...

Github Action Bot 开发教程

Github Action Bot 开发教程 在使用 Github 时&#xff0c;你可能在一些著名的开源项目&#xff0c;例如 Kubernetes&#xff0c;Istio 中看到如下的一些评论&#xff1a; /lgtm /retest /area bug /assign xxxx ...等等&#xff0c;诸如此类的一些功能性评论。在这些评论出现…...

使用docker创建rocketMQ主从结构,使用

1、 创建目录 mkdir -p /docker/rocketmq/logs/nameserver-a mkdir -p /docker/rocketmq/logs/nameserver-b mkdir -p /docker/rocketmq/logs/broker-a mkdir -p /docker/rocketmq/logs/broker-b mkdir -p /docker/rocketmq/store/broker-a mkdir -p /docker/rocketmq/store/b…...

一次完整的 http 请求是怎样的?

一次完整的 http 请求是怎样的&#xff1f; &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 域名解析 --> 发起 TCP 的 3 次握手 --> 建立 TCP 连接后发起 http 请求 --> 服务器响应 http 请求&#xff0c;浏览器得到 html 代码 --…...

并行执行的概念—— 《OceanBase 并行执行》系列 一

From 产品经理&#xff1a; 这是一份姗姗来迟的关于OceanBase并行执行的系统化产品文档。 自2019年起&#xff0c;并行执行功能已被许多客户应用于多种场景之中&#xff0c;其重要性日益凸显。然而&#xff0c;遗憾的是&#xff0c;我们始终未能提供一份详尽的用户使用文档&…...

使用 ipdb 调试回调函数

一、问题概述 回调函数是指一个函数执行完后&#xff0c;调用另外一个函数的过程。 一般步骤是&#xff0c;回调函数作为参数传递给原始函数&#xff0c;原始函数执行完自己的逻辑后&#xff0c;自动调用回调函数并将自己的执行结果作为参数传递给回调函数。 根据不同的用法&a…...

介绍一下mybatis的基本配置(mybatis-config.xml)

src/main/resources/mybatis-config.xml 这句代码&#xff0c;是XML的声明&#xff0c;它指定了&#xff0c;XML的版本 和 编码方式 <?xml version"1.0" encoding"UTF-8" ?>这句代码&#xff0c;声明了XML文档类型&#xff0c;它告诉解析器&#x…...

【MySQL】第一次作业

【MySQL】第一次作业 1、在官网下载安装包2、解压安装包&#xff0c;创建一个dev_soft文件夹&#xff0c;解压到里面。3、创建一个数据库db_classes4、创建一行表db_hero5、将四大名著中的常见人物插入这个英雄表 写一篇博客&#xff0c;在window系统安装MySQL将本机的MySQL一定…...

10个免费视频素材网站,剪辑师们赶紧收藏!

剪辑师们不知道去哪里找免费视频素材&#xff0c;就上这10个网站&#xff0c;免费下载部分还可商用&#xff0c;赶紧收藏起来&#xff01; 1、菜鸟图库 https://www.sucai999.com/video.html?vNTYwNDUx 菜鸟图库虽然是个设计素材网站&#xff0c;但除了设计类素材之外还有很多…...

【毕业设计】基于SSM的运动用品商城的设计与实现

1.项目介绍 在这个日益数字化和信息化的时代&#xff0c;随着人们购物习惯的转变&#xff0c;传统的实体商店已经无法满足人们日益增长的在线购物需求。因此&#xff0c;基于SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架的运动用品商城项目应运而生&#xff0…...

【Web】CTFSHOW 中期测评刷题记录(1)

目录 web486 web487 web488 web489 web490 web491 web492 web493 web494 web495 web496 web497 web498 web499 web500 web501 web502 web503 web505 web506 web507 web508 web509 web510 web486 扫目录 初始界面尝试文件包含index.php&am…...

vs配置cplex12.10

1.创建c空项目 2.修改运行环境 为release以及x64 3.创建cpp文件 4.鼠标右键点击项目中的属性 5.点击c/c&#xff0c;点击第一项常规&#xff0c;配置附加库目录 5.添加文件索引&#xff0c;主要用于把路径导进来 6.这一步要添加的目录与你安装的cplex的目录有关系 F:\program…...

Kubernetes 弃用Docker后 Kubelet切换到Containerd

containerd 是一个高级容器运行时&#xff0c;又名 容器管理器。简单来说&#xff0c;它是一个守护进程&#xff0c;在单个主机上管理完整的容器生命周期&#xff1a;创建、启动、停止容器、拉取和存储镜像、配置挂载、网络等。 containerd 旨在轻松嵌入到更大的系统中。Docke…...

函数模板含有多个模板参数

如果一个模板接受多个参数&#xff0c;用逗号分隔参数。 使用时必要情况下需要主动传入模板参数。 #include <iostream> #include <vector>/* Compute the greatest common divisor of two integers, using Euclids algorithm. */ template<class T, class U&g…...

Sprd Android 13 增加系统属性判断当前有无 OTG U盘插入,App 读取系统属性

添加系统属性,通过监听插拔广播判断当前有无OTG U盘插入 --- a/frameworks/base/services/core/java/com/android/server/policy/PhoneWindowManager.java +++ b/frameworks/base/services/core/java/com/android/server/policy/PhoneWindowManager.java @@ -246,6 +246,7 @@ …...

第11章 数据库技术(第一部分)

一、数据库技术术语 &#xff08;一&#xff09;术语 1、数据 数据描述事物的符号描述一个对象所用的标识&#xff0c;可以文字、图形、图像、语言等等 2、信息 现实世界对事物状态变化的反馈。可感知、可存储、可加工、可再生。数据是信息的表现形式和载体&#xff0c;信…...

数据结构––队列

1.队列的定义 2.队列的分类 2.1循环队 2.2链式队 3.队列的实现 3.1循环队 3.1.1声明 typedef int QDataType; #define MAXSIZE 50 //定义元素的最大个数 /*循环队列的顺序存储结构*/ typedef struct {QDataType *data;int front; //头指针int rear; //尾指针 }Queue;…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...