AngularJS 的生命周期和基础语法

news2024/10/5 17:27:13

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 = true
  isShow2 : boolean = true

  changeShow(){
    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 = true
  isShow2 : boolean = true

  changeShow(){
    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 = true
  isShow2 : boolean = true

  changeShow(){
    this.isShow2 = !this.isShow2
  }

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

  author:number = 0
  changAuthor() {
    this.author =   this.author+1
    console.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';

并在 @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 = true
  isShow2 : boolean = true

  changeShow(){
    this.isShow2 = !this.isShow2
  }

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

  author:number = 0
  changAuthor() {
    this.author =   this.author+1
    console.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.coloradmin.cn/o/1638395.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【跟我学RISC-V】（一）认识RISC-V指令集并搭建实验环境

【跟我学RISC-V】（一）认识RISC-V指令集并搭建实验环境

写在前面 现在计算机的体系架构正是发展得如火如荼的时候&#xff0c;占领桌面端市场的x86架构、占领移动端市场的arm架构、在服务器市场仍有一定地位的mips架构、国产自研的指令集loongarch架构、还有我现在要讲到的新型开源开放的RISC-V指令集架构。 我先说一说我的学习经历…
阅读更多...
区块链 | IPFS 工作原理入门

区块链 | IPFS 工作原理入门

&#x1f98a;原文&#xff1a;What is the InterPlanetary File System (IPFS), and how does it work? &#x1f98a;写在前面&#xff1a;本文属于搬运博客&#xff0c;自己留存学习。 1 去中心化互联网 尽管万维网是一个全球性的网络&#xff0c;但在数据存储方面&#…
阅读更多...
LeetCode热题100：双指针

LeetCode热题100：双指针

283.移动零 题目链接&#xff1a;移动零 题目描述&#xff1a;给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 解题思路&#xff1a; 创建两…
阅读更多...
三种滤波（EKF、UKF、CKF）的对比，含MATLAB源代码

三种滤波（EKF、UKF、CKF）的对比，含MATLAB源代码

使用MATLAB模拟三维的滤波，包含扩展卡尔曼滤波EKF、无迹卡尔曼滤波UKF、容积卡尔曼滤波CKF。 状态更新和观测更新均为非线性的，模拟一定强度的机动性，可用于卡尔曼滤波方法的对比学习，自己修改成需要的运动模型后，可以用于组合导航（GPS+DVL形式）。 运行结果 真值的三轴…
阅读更多...
c#word文档:3.向Word文档中插入表格/4.读取Word文档中表格

c#word文档:3.向Word文档中插入表格/4.读取Word文档中表格

--向Word文档中插入表格-- &#xff08;1&#xff09;在OfficeOperator项目的WordOperator类中定义向Word文档插入换页的函数NewPage &#xff08;2&#xff09;在WordOperator类中定义向Word文档插入表格的函数InsertTable using Microsoft.Office.Interop.Word;// 引入Mic…
阅读更多...
不小心格式化固态硬盘之后，数据能恢复吗？小白实测

不小心格式化固态硬盘之后，数据能恢复吗？小白实测

前言 这段时间突然想到一件事情&#xff1a;固态硬盘一旦坏了&#xff0c;数据恢复的可能性基本上是0。 这件事情是小白自己亲身经历的&#xff0c;所以使用固态硬盘的小伙伴一定要注意数据备份&#xff0c;至少备一份到机械硬盘里&#xff0c;还会稍微可靠一些。 这几天小白…
阅读更多...
node.js的常用内置库(1)共128节

node.js的常用内置库(1)共128节

我说假如node.js 一路杀出&#xff0c;成为一种后端主要选型的时候&#xff0c;你再次去了解晚么&#xff0c;不晚&#xff0c;但给你的时间肯定不多&#xff5e;&#x1f604; 跟着我一起开始认识node吧&#xff0c;今日份不多3个API &#xff0c;加油 1.assert 在 Node.js 环…
阅读更多...
水稻病害检测（YOLO数据集，多分类，稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫）

水稻病害检测（YOLO数据集，多分类，稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫）

是自己利用LabelImg工具进行手工标注&#xff0c;数据集制作不易&#xff0c;请尊重版权&#xff08;稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫&#xff09; 如果需要yolv8检测模型和数据集放在一起的压缩包&#xff0c;可以关注&#xff1a;最新最…
阅读更多...
Pandas入门篇（三）-------数据可视化篇3（seaborn篇）（pandas完结撒花！！！）

Pandas入门篇（三）-------数据可视化篇3（seaborn篇）（pandas完结撒花！！！）

目录 概述一、语法二、常用单变量绘图1. 直方图&#xff08;histplot&#xff09;2. 核密度预估图&#xff08;kdeplot&#xff09;3. 计数柱状图&#xff08;countplot&#xff09; 三、常用多变量绘图1.散点图(1) scatterplot(2)regplot 散点图拟合回归线(3)jointplot 散点图…
阅读更多...
DVWA 靶场命令注入通关解析

DVWA 靶场命令注入通关解析

介绍 命令注入&#xff08;Command Injection&#xff09;是一种常见的安全漏洞&#xff0c;它允许攻击者通过在应用程序中执行恶意命令来获取系统权限或执行非授权操作。 命令注入通常发生在需要将用户输入作为命令执行的地方&#xff0c;例如Web应用程序的输入框、参数传递…
阅读更多...
【C++容器map】map的相关用法

【C++容器map】map的相关用法

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; C进阶 &#x1f389;其它专栏&#xff1a; C初阶 | 初阶数据结构 | Linux 本篇文章主要讲解 C容器之map相关用法 的相关内容 文章目录 1. map的介绍2. map的使用<font size5 color #…
阅读更多...
Word域代码学习(简单使用)-【SEQ】

Word域代码学习(简单使用)-【SEQ】

Word域代码学习(简单使用)-【SEQ】 快捷键 序号快捷键操作1 Ctrl F9 插入域代码花括号2 F9 显示域代码结果3 Shift F9 切换为域代码4 Windows Alt F9 切换全部域代码 域代码说明 域代码不区分大小写在word中&#xff0c;依次选择插入➡文档部件➡域即可选择插入…
阅读更多...
WordPress Automatic插件 SQL注入漏洞复现(CVE-2024-27956)

WordPress Automatic插件 SQL注入漏洞复现(CVE-2024-27956)

0x01 产品简介 WordPress Automatic（又称为WP Automatic）是一款流行的WordPress插件，旨在帮助网站管理员自动化内容创建和发布。该插件可以从各种来源（如RSS Feeds、社交媒体、视频网站、新闻网站等）获取内容，并将其自动发布到WordPress网站。 0x02 漏洞概述 WordPres…
阅读更多...
Linux-进程调度器

Linux-进程调度器

1. 前言 在计算机中&#xff0c;进程的数量远多于cpu的数量&#xff0c;所以就存在&#xff0c;多个进程抢占一个cpu的情况&#xff0c;所以就需要一套规则&#xff0c;决定这些进程被处理的顺序&#xff0c;这就叫做进程调度。 在我的简单理解下&#xff0c;其实就是把进程放…
阅读更多...
正点原子[第二期]Linux之ARM（MX6U）裸机篇学习笔记-6.4--汇编LED驱动程序

正点原子[第二期]Linux之ARM（MX6U）裸机篇学习笔记-6.4--汇编LED驱动程序

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…
阅读更多...
网络安全之弱口令与命令爆破（中篇）（技术进阶）

网络安全之弱口令与命令爆破（中篇）（技术进阶）

目录 一&#xff0c;什么是弱口令&#xff1f; 二&#xff0c;为什么会产生弱口令呢&#xff1f; 三&#xff0c;字典的生成 四&#xff0c;使用Burpsuite工具验证码爆破 总结 笔记改错 一&#xff0c;什么是弱口令&#xff1f; 弱口令就是容易被人们所能猜到的密码呗&a…
阅读更多...
Android数据恢复软件快速比较：Android数据恢复的7最佳工具

Android数据恢复软件快速比较：Android数据恢复的7最佳工具

您在 Android 设备上保留哪些类型的数据&#xff1f;如果您和大多数人一样&#xff0c;那么您可能已经列出了文档、照片、视频和音频文件。如果您使用智能手机或平板电脑的时间足够长&#xff0c;我们愿意打赌您拥有Android数据丢失的第一手经验。 幸运的是&#xff0c;我们也…
阅读更多...
JSON教程（非常详细）

JSON教程（非常详细）

参考文章来源&#xff1a;JSON教程&#xff08;非常详细&#xff09; 目录 JSON JSON 发展史 为什么要使用 JSON&#xff1f; JSON 的不足 存储格式 使用场景 1) 定义接口 2) 序列化 3) 生成 Token 4) 配置文件 JSON语法规则 JSON 与 JavaScript 对象的区别 JSON数…
阅读更多...
Python | Leetcode Python题解之第62题不同路径

Python | Leetcode Python题解之第62题不同路径

题目&#xff1a; 题解&#xff1a; class Solution:def uniquePaths(self, m: int, n: int) -> int:return comb(m n - 2, n - 1)
阅读更多...
基于SSM的个人博客系统（三）

基于SSM的个人博客系统（三）

目录 第五章 系统实现 5.1 登录模块 5.1.1 博主登录 5.2 博客管理模块&#xff1a; 5.2.1 博客查询 5.2.2 博客新建 5.2.3 博客修改 5.2.4 博客删除 5.3 博客类别管理模块 前面内容请移步 基于SSM的个人博客系统&#xff08;二&#xff09; 个人博客系统的设计…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023