angular学习之聊聊组件通讯和组件生命周期

137 阅读 0 评论 91 点赞

我是靠谱客的博主专注睫毛膏，这篇文章主要介绍angular学习之聊聊组件通讯和组件生命周期，现在分享给大家，希望可以做个参考。

本篇文章带大家了解一下angular中的组件通讯和组件生命周期，简单介绍一下向组件内部传递数据、组件向外部传递数据的方法，希望对大家有所帮助！

组件通讯

1、向组件内部传递数据

复制代码<app-favorite [isFavorite]="true"></app-favorite>1
<app-favorite [isFavorite]="true"></app-favorite>
登录后复制

复制代码// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}1
2
3
4
5
// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}
登录后复制

【相关教程推荐：《angular教程》】

注意：在属性的外面加 [] 表示绑定动态值，在组件内接收后是布尔类型，不加 [] 表示绑定普通值，在组件内接收后是字符串类型。

复制代码<app-favorite [is-Favorite]="true"></app-favorite>1
<app-favorite [is-Favorite]="true"></app-favorite>
登录后复制

复制代码import { Input } from '@angular/core';

export class FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}1
2
3
4
5
import { Input } from '@angular/core';

export class FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}
登录后复制

2、组件向外部传递数据

需求：在子组件中通过点击按钮将数据传递给父组件

复制代码<!-- 子组件模板 -->
<button (click)="onClick()">click</button>1
2
<!-- 子组件模板 -->
<button (click)="onClick()">click</button>
登录后复制

复制代码// 子组件类
import { EventEmitter, Output } from "@angular/core"

export class FavoriteComponent {
  @Output() change = new EventEmitter()
  onClick() {
    this.change.emit({ name: "张三" })
  }
}1
2
3
4
5
6
7
8
9
// 子组件类
import { EventEmitter, Output } from "@angular/core"

export class FavoriteComponent {
  @Output() change = new EventEmitter()
  onClick() {
    this.change.emit({ name: "张三" })
  }
}
登录后复制

复制代码<!-- 父组件模板 -->
<app-favorite (change)="onChange($event)"></app-favorite>1
2
<!-- 父组件模板 -->
<app-favorite (change)="onChange($event)"></app-favorite>
登录后复制

复制代码// 父组件类
export class AppComponent {
  onChange(event: { name: string }) {
    console.log(event)
  }
}1
2
3
4
5
6
// 父组件类
export class AppComponent {
  onChange(event: { name: string }) {
    console.log(event)
  }
}
登录后复制

组件生命周期

请添加图片描述

1、挂载阶段

挂载阶段的生命周期函数只在挂载阶段执行一次，数据更新时不再执行。

1）、constructor

Angular 在实例化组件类时执行, 可以用来接收 Angular 注入的服务实例对象。

复制代码export class ChildComponent {
  constructor (private test: TestService) {
    console.log(this.test) // "test"
  }
}1
2
3
4
5
export class ChildComponent {
  constructor (private test: TestService) {
    console.log(this.test) // "test"
  }
}
登录后复制

2）、ngOnInit

在首次接收到输入属性值后执行，在此处可以执行请求操作。

复制代码<app-child name="张三"></app-child>1
<app-child name="张三"></app-child>
登录后复制

复制代码export class ChildComponent implements OnInit {
  @Input("name") name: string = ""
  ngOnInit() {
    console.log(this.name) // "张三"
  }
}1
2
3
4
5
6
export class ChildComponent implements OnInit {
  @Input("name") name: string = ""
  ngOnInit() {
    console.log(this.name) // "张三"
  }
}
登录后复制

3）、ngAfterContentInit

当内容投影初始渲染完成后调用。

复制代码<app-child>
	<div #box>Hello Angular</div>
</app-child>1
2
3
<app-child>
	<div #box>Hello Angular</div>
</app-child>
登录后复制

复制代码export class ChildComponent implements AfterContentInit {
  @ContentChild("box") box: ElementRef<HTMLDivElement> | undefined

  ngAfterContentInit() {
    console.log(this.box) // <div>Hello Angular</div>
  }
}1
2
3
4
5
6
7
export class ChildComponent implements AfterContentInit {
  @ContentChild("box") box: ElementRef<HTMLDivElement> | undefined

  ngAfterContentInit() {
    console.log(this.box) // <div>Hello Angular</div>
  }
}
登录后复制

4）、ngAfterViewInit

当组件视图渲染完成后调用。

复制代码<!-- app-child 组件模板 -->
<p #p>app-child works</p>1
2
<!-- app-child 组件模板 -->
<p #p>app-child works</p>
登录后复制

复制代码export class ChildComponent implements AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> | undefined
  ngAfterViewInit () {
    console.log(this.p) // <p>app-child works</p>
  }
}1
2
3
4
5
6
export class ChildComponent implements AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> | undefined
  ngAfterViewInit () {
    console.log(this.p) // <p>app-child works</p>
  }
}
登录后复制

2、更新阶段

1）、ngOnChanges

当输入属性值发生变化时执行，初始设置时也会执行一次，顺序优于 ngOnInit
不论多少输入属性同时变化，钩子函数只会执行一次，变化的值会同时存储在参数中
参数类型为 SimpleChanges，子属性类型为 SimpleChange
对于基本数据类型来说, 只要值发生变化就可以被检测到
对于引用数据类型来说, 可以检测从一个对象变成另一个对象, 但是检测不到同一个对象中属性值的变化，但是不影响组件模板更新数据。

基本数据类型值变化

复制代码<app-child [name]="name" [age]="age"></app-child>
<button (click)="change()">change</button>1
2
<app-child [name]="name" [age]="age"></app-child>
<button (click)="change()">change</button>
登录后复制

复制代码export class AppComponent {
  name: string = "张三";
  age: number = 20
  change() {
    this.name = "李四"
    this.age = 30
  }
}1
2
3
4
5
6
7
8
export class AppComponent {
  name: string = "张三";
  age: number = 20
  change() {
    this.name = "李四"
    this.age = 30
  }
}
登录后复制

复制代码export class ChildComponent implements OnChanges {
  @Input("name") name: string = ""
  @Input("age") age: number = 0

  ngOnChanges(changes: SimpleChanges) {
    console.log("基本数据类型值变化可以被检测到")
  }
}1
2
3
4
5
6
7
8
export class ChildComponent implements OnChanges {
  @Input("name") name: string = ""
  @Input("age") age: number = 0

  ngOnChanges(changes: SimpleChanges) {
    console.log("基本数据类型值变化可以被检测到")
  }
}
登录后复制

引用数据类型变化

复制代码<app-child [person]="person"></app-child>
<button (click)="change()">change</button>1
2
<app-child [person]="person"></app-child>
<button (click)="change()">change</button>
登录后复制

复制代码export class AppComponent {
  person = { name: "张三", age: 20 }
  change() {
    this.person = { name: "李四", age: 30 }
  }
}1
2
3
4
5
6
export class AppComponent {
  person = { name: "张三", age: 20 }
  change() {
    this.person = { name: "李四", age: 30 }
  }
}
登录后复制

复制代码export class ChildComponent implements OnChanges {
  @Input("person") person = { name: "", age: 0 }

  ngOnChanges(changes: SimpleChanges) {
    console.log("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")
  }
}1
2
3
4
5
6
7
export class ChildComponent implements OnChanges {
  @Input("person") person = { name: "", age: 0 }

  ngOnChanges(changes: SimpleChanges) {
    console.log("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")
  }
}
登录后复制

2）、ngDoCheck：主要用于调试，只要输入属性发生变化，不论是基本数据类型还是引用数据类型还是引用数据类型中的属性变化，都会执行。

3）、ngAfterContentChecked：内容投影更新完成后执行。

4）、ngAfterViewChecked：组件视图更新完成后执行。

3、卸载阶段

1）、ngOnDestroy

当组件被销毁之前调用, 用于清理操作。

复制代码export class HomeComponent implements OnDestroy {
  ngOnDestroy() {
    console.log("组件被卸载")
  }
}1
2
3
4
5
export class HomeComponent implements OnDestroy {
  ngOnDestroy() {
    console.log("组件被卸载")
  }
}
登录后复制