本篇文章带大家了解一下angular中的组件通讯和组件生命周期，简单介绍一下向组件内部传递数据、组件向外部传递数据的方法，希望对大家有所帮助！
组件通讯
1、向组件内部传递数据
登录后复制
// favorite.component.tsimport { Input } from '@angular/core';export class FavoriteComponent { @Input() isFavorite: boolean = false;}
登录后复制
【相关教程推荐：《angular教程》】
注意：在属性的外面加 [] 表示绑定动态值，在组件内接收后是布尔类型，不加 [] 表示绑定普通值，在组件内接收后是字符串类型。
登录后复制
import { Input } from '@angular/core';export class FavoriteComponent { @Input("is-Favorite") isFavorite: boolean = false}
登录后复制
2、组件向外部传递数据
需求：在子组件中通过点击按钮将数据传递给父组件
登录后复制
// 子组件类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
对于基本数据类型来说, 只要值发生变化就可以被检测到
对于引用数据类型来说, 可以检测从一个对象变成另一个对象, 但是检测不到同一个对象中属性值的变化，但是不影响组件模板更新数据。
基本数据类型值变化
登录后复制登录后复制
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("基本数据类型值变化可以被检测到") }}
登录后复制
引用数据类型变化
登录后复制登录后复制
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学习之聊聊组件通讯和组件生命周期的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2701250.html
