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 = 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.mfbz.cn/a/588333.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Flutter笔记：Widgets Easier组件库（4）使用按钮组

Flutter笔记：Widgets Easier组件库（4）使用按钮组

Flutter笔记 Widgets Easier组件库&#xff08;4&#xff09;&#xff1a;使用按钮组 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress…
阅读更多...
vue3 vite 路由去中心化（modules文件夹自动导入router）

vue3 vite 路由去中心化（modules文件夹自动导入router）

通过路由去中心化可实现多人写作开发&#xff0c;不怕文件不停修改导致的冲突&#xff0c;modules中的文件可自动导入到index.js中 // 自动导入模块 const files import.meta.globEager(./modules/**.js); const modules {} for (const key in files) {modules[key.replace…
阅读更多...
【C语言加油站】字符函数与字符串函数

【C语言加油站】字符函数与字符串函数

字符函数与字符串函数 导言一、字符分类函数1.1 字符分类函数的用法 二、字符转换函数2.1 字符转换函数的用法 三、字符串函数3.1 成员3.2 strlen函数3.2.1 size_t类型3.2.2 strlen的易错点3.2.2 strlen的使用3.2.3 strlen与sizeof 3.3 strcpy函数和strncpy函数3.3.1 strcpy和s…
阅读更多...
Messari 报告摘要 ：Covalent Network（CQT）2024 年第一季度表现

Messari 报告摘要 ：Covalent Network（CQT）2024 年第一季度表现

摘要&#xff1a; 尽管 CQT 代币流通供应量增加了 20%&#xff08;新增 1.04 亿枚 CQT&#xff09;&#xff0c;但 CQT 的质押百分比仅从 2023 年第一季度的 22% 增长到了 2024 年第一季度的 29%。 CQT 的市值季度环比增长了 28%&#xff0c;多次达到 2.75 亿美元&#xff0c…
阅读更多...
脑筋急转弯在线问答

脑筋急转弯在线问答

页面效果 点击“显示答案”按钮&#xff0c;显示参考答案。 页面代码 <% layout(/layouts/default.html, {title: 脑筋急转弯管理, libs: [dataGrid]}){ %> <div class"main-content"><div class"box box-main"><div class"bo…
阅读更多...
【介绍下大数据组件之Storm】

【介绍下大数据组件之Storm】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
【Java】 对象的比较【比较器】

【Java】 对象的比较【比较器】

登神长阶 第七阶 Java对象的比较 &#x1f3b7;一.Java对象的比较 &#x1fa97;1.基于引用的比较 基于引用的比较在Java中使用运算符进行。它主要检查两个对象是否引用内存中的相同位置。以下是基于引用的比较的详细介绍&#xff1a; 使用运算符&#xff1a; 运算符用于比…
阅读更多...
【Qt QML】Frame组件

【Qt QML】Frame组件

Frame&#xff08;框架&#xff09;包含在&#xff1a; import QtQuick.Controls继承自Pane控件。用于在可视框架内布局一组逻辑控件。简单来说就是用来包裹和突出显示其他可视元素。Frame不提供自己的布局&#xff0c;但需要自己对元素位置进行设置和定位&#xff0c;例如通过…
阅读更多...
vue3与js的router基本使用方式

vue3与js的router基本使用方式

title: vue3与js的router基本使用方式 tags: vue3js abbrlink: ‘57270957’ date: 2024-04-17 18:54:47 第一步快捷引入的别名 使用路由需要大量在src文件中引用所需要的地址&#xff0c;并且组件中也需要很多的包的引用&#xff0c;将快速跳转到src这一文件的步骤进行简化操…
阅读更多...
如何从 iPhone 恢复已删除或丢失的联系人？

如何从 iPhone 恢复已删除或丢失的联系人？

不小心删除了您的 iPhone 联系人&#xff1f;不用担心。我们将向您展示如何从 iPhone或 iPad恢复已删除或丢失的联系人。当您从 iPhone 中删除联系人时&#xff0c;您可能认为无法将其恢复。但事实是&#xff0c;您可以从 iPhone 或 iPad 恢复已删除的联系人&#xff0c;因为它…
阅读更多...
模型智能体开发之metagpt-多智能体实践

模型智能体开发之metagpt-多智能体实践

参考&#xff1a; metagpt环境配置参考模型智能体开发之metagpt-单智能体实践 需求分析 之前有过单智能体的测试case&#xff0c;但是现实生活场景是很复杂的&#xff0c;所以单智能体远远不能满足我们的诉求&#xff0c;所以仍然还需要了解多智能体的实现。通过多个role对动…
阅读更多...
手撕spring框架（3）

手撕spring框架（3）

手撕spring框架&#xff08;3&#xff09; 相关系列 手撕spring框架&#xff08;1&#xff09; 手撕spring框架&#xff08;2&#xff09; InitializingBean 接口详解 什么是 InitializingBean 接口&#xff1f; InitializingBean 接口是 Spring 框架中的一个接口&#xff0c…
阅读更多...
【linux】进程（深入理解linux进程状态）

【linux】进程（深入理解linux进程状态）

开始之前先说一个与本文无关的小知识&#xff0c;chdir命令可以更改当前进程的工作目录哦。 目录 linux具体进程状态&#xff1a;R && S&#xff1a;T && t&#xff1a;D&#xff1a;僵尸进程 && 孤儿进程&#xff1a; OS的理论线&#xff1a;运行&…
阅读更多...
模型训练中的过拟合和欠拟合

模型训练中的过拟合和欠拟合

基本概念 我们知道&#xff0c;所谓的神经网络其实就是一个复杂的非线性函数&#xff0c;网络越深&#xff0c;这个函数就越复杂&#xff0c;相应的表达能力也就越强&#xff0c;神经网络的训练则是一个拟合的过程。   当模型的复杂度小于真实数据的复杂度&#xff0c;模型表…
阅读更多...
正版Office-Word使用时却提示无网络连接请检查你的网络设置 然后重试

正版Office-Word使用时却提示无网络连接请检查你的网络设置 然后重试

这是购买电脑时自带的已经安装好的word。看纸箱外壳有office标记&#xff0c;但是好像没有印系列号。 某天要使用。提示&#xff1a;无网络连接请检查你的网络设置。 经过网上高手的提示&#xff1a; 说要勾选勾选ssl3.0、TLS1.0、1.1、1.2。 我的截图 我电脑进去就缺1.2. …
阅读更多...
2024五一数学建模A题思路代码与论文分析

2024五一数学建模A题思路代码与论文分析

2024五一数学建模A题完整代码和成品论文获取↓↓↓↓↓ https://www.yuque.com/u42168770/qv6z0d/gyoz9ou5upvkv6nx?singleDoc# 2024五一数学建模A题钢板最优切割路径问题需要建立的模型和算法: 图论 最短路径算法(Dijkstra算法、Floyd算法等) 动态规划 网格化离散建模 …
阅读更多...
Surya：强大的开源 OCR 文字识别工具

Surya：强大的开源 OCR 文字识别工具

在当今数字化时代&#xff0c;文字识别技术扮演着至关重要的角色。VikParuchuri/surya 便是一款令人瞩目的开源 OCR 文字识别工具。 主要功能&#xff1a; 支持 90 多种语言的文字识别&#xff1a;Surya 具备强大的语言兼容性&#xff0c;能够轻松应对多种语言的文字识别任务&…
阅读更多...
保存钉钉群直播回放下载：直播回放下载步骤详解

保存钉钉群直播回放下载：直播回放下载步骤详解

今天&#xff0c;我们就来拨开云雾&#xff0c;揭开保存钉钉群直播回放的神秘面纱。教会你们如何下载钉钉群直播回放 首先用到的工具我全部打包好了&#xff0c;有需要的自己下载一下 钉钉群直播回放工具下载&#xff1a;https://pan.baidu.com/s/1WVMNGoKcTwR_NDpvFP2O2A?p…
阅读更多...
基于EBAZ4205矿板的图像处理：03摄像头采集HDMI输出视频图像

基于EBAZ4205矿板的图像处理：03摄像头采集HDMI输出视频图像

基于EBAZ4205矿板的图像处理&#xff1a;03摄像头采集HDMI输出视频图像 先看效果 项目简介 我是使用的EBAZ4205矿板&#xff0c;超级大电工的转接板和我自己买的一块没有xclk的ov5640完成的该项目&#xff0c;没有设备需自备。我就是跑通了正点原子的开源代码&#xff08;下文…
阅读更多...
1991-2022年上市公司短贷长投/短债长用/投融资期限错配（包含原始数据及Stata代码）

1991-2022年上市公司短贷长投/短债长用/投融资期限错配（包含原始数据及Stata代码）

01、数据简介 上市公司在投融资过程中&#xff0c;可能会涉及到投融资期限错配、短债长用和短贷长投等问题 投融资期限错配是指企业的资产与债务期限不匹配&#xff0c;主要表现为“短存长贷”&#xff0c;即资金来源短期化、资金运用长期化。当风险缓释的期限比当前的风险暴…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站