脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS 生命周期

AngularJS 的生命周期和基础语法使用详解

 更新时间：2024年05月05日 11:01:24   作者：GeGe&YoYo  
当你在输入框中键入文本时,这个文本会立即反映到 testString 属性上,反之亦然,如果你在组件类中改变 testString 的值,输入框的内容也会相应更新,这篇文章主要介绍了AngularJS 的生命周期和基础语法,需要的朋友可以参考下

AngularJS 的生命周期和基础语法

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

到此这篇关于AngularJS 的生命周期和基础语法的文章就介绍到这了,更多相关AngularJS 的生命周期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Angular5中提取公共组件之radio list的实例代码

    Angular5中提取公共组件之radio list的实例代码

    这篇文章主要介绍了Angular5中提取公共组件之radio list的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Angular+ionic实现折叠展开效果的示例代码

    Angular+ionic实现折叠展开效果的示例代码

    这篇文章主要介绍了Angular+ionic实现折叠展开效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 如何用DevUI搭建自己的Angular组件库

    如何用DevUI搭建自己的Angular组件库

    DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！
    2021-05-05
  • angular-cli修改端口号【angular2】

    angular-cli修改端口号【angular2】

    本篇文章主要介绍了angular2中angular-cli修改端口号的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • AngularJS 霸道的过滤器小结

    AngularJS 霸道的过滤器小结

    本篇文章主要介绍了AngularJS 霸道的过滤器小结，在实际操作中，我们需要对统一数据源进行多次转换，本文详细讨论有关过滤器的用法 。
    2017-04-04
  • Angular2-primeNG文件上传模块FileUpload使用详解

    Angular2-primeNG文件上传模块FileUpload使用详解

    这篇文章主要为大家详细介绍了Angular2-primeNG文件上传模块FileUpload使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Angular Cookie 读写操作代码

    Angular Cookie 读写操作代码

    这篇文章主要介绍了Angular Cookie 读写操作代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，感兴趣的朋友跟随小编一起看看吧
    2022-01-01
  • Angular 2父子组件数据传递之局部变量获取子组件其他成员

    Angular 2父子组件数据传递之局部变量获取子组件其他成员

    这篇文章主要给大家介绍了关于Angular 2父子组件之间数据传递之局部变量获取子组件其他成员的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07
  • Angular中innerHTML标签的样式不起作用的原因解析

    Angular中innerHTML标签的样式不起作用的原因解析

    这篇文章主要介绍了Angular中innerHTML标签的样式不起作用详解 ,本文给出了解决方案，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-06-06
  • Angular-Touch库用法示例

    Angular-Touch库用法示例

    这篇文章主要介绍了Angular-Touch库用法,结合触屏滑动事件的实现为例分析了Angular-Touch库的相关使用技巧,需要的朋友可以参考下
    2016-12-12

最新评论