angular组件通讯和组件生命周期是什么
本文小编为大家详细介绍“angular组件通讯和组件生命周期是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“angular组件通讯和组件生命周期是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
成都创新互联公司于2013年开始，是专业互联网技术服务公司，拥有项目成都做网站、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元千阳做网站,已为上家服务,为千阳各地企业和个人服务,联系电话:13518219792
组件通讯
1、向组件内部传递数据
// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {
@Input() isFavorite: boolean = false;
}注意：在属性的外面加 [] 表示绑定动态值，在组件内接收后是布尔类型，不加 [] 表示绑定普通值，在组件内接收后是字符串类型。
import { Input } from '@angular/core';
export class FavoriteComponent {
@Input("is-Favorite") isFavorite: boolean = false
}2、组件向外部传递数据
需求：在子组件中通过点击按钮将数据传递给父组件
click
// 子组件类
import { EventEmitter, Output } from "@angular/core"
export class FavoriteComponent {
@Output() change = new EventEmitter()
onClick() {
this.change.emit({ name: "张三" })
}
}
// 父组件类
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"
}
}2）、ngOnInit
在首次接收到输入属性值后执行，在此处可以执行请求操作。
export class ChildComponent implements OnInit {
@Input("name") name: string = ""
ngOnInit() {
console.log(this.name) // "张三"
}
}3）、ngAfterContentInit
当内容投影初始渲染完成后调用。
Hello Angular
export class ChildComponent implements AfterContentInit {
@ContentChild("box") box: ElementRef | undefined
ngAfterContentInit() {
console.log(this.box) // Hello Angular
}
}4）、ngAfterViewInit
当组件视图渲染完成后调用。
app-child works
export class ChildComponent implements AfterViewInit {
@ViewChild("p") p: ElementRef | undefined
ngAfterViewInit () {
console.log(this.p) // app-child works
}
}2、更新阶段
1）、ngOnChanges
当输入属性值发生变化时执行，初始设置时也会执行一次，顺序优于 ngOnInit
不论多少输入属性同时变化，钩子函数只会执行一次，变化的值会同时存储在参数中
参数类型为 SimpleChanges，子属性类型为 SimpleChange
对于基本数据类型来说, 只要值发生变化就可以被检测到
对于引用数据类型来说, 可以检测从一个对象变成另一个对象, 但是检测不到同一个对象中属性值的变化，但是不影响组件模板更新数据。
基本数据类型值变化
change
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("基本数据类型值变化可以被检测到")
}
}引用数据类型变化
change
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("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")
}
}2）、ngDoCheck：主要用于调试，只要输入属性发生变化，不论是基本数据类型还是引用数据类型还是引用数据类型中的属性变化，都会执行。
3）、ngAfterContentChecked：内容投影更新完成后执行。
4）、ngAfterViewChecked：组件视图更新完成后执行。
3、卸载阶段
1）、ngOnDestroy
当组件被销毁之前调用, 用于清理操作。
export class HomeComponent implements OnDestroy {
ngOnDestroy() {
console.log("组件被卸载")
}
}读到这里，这篇“angular组件通讯和组件生命周期是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。
当前标题：angular组件通讯和组件生命周期是什么
文章位置：
http://chengdu.cdxwcx.cn/article/jdijoc.html
