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

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

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

Angular学习之聊聊组件通讯和组件生命周期插图1

组件通讯

1、向组件内部传递数据

<app-favorite[isFavorite]="true"></app-favorite>//favorite.component.tsimport{Input}from'@angular/core';exportclassFavoriteComponent{@Input()isFavorite:boolean=false;}

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

<app-favorite[is-Favorite]="true"></app-favorite>import{Input}from'@angular/core';exportclassFavoriteComponent{@Input("is-Favorite")isFavorite:boolean=false}

2、组件向外部传递数据

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

<!--子组件模板--><button(click)="onClick()">click</button>//子组件类import{EventEmitter,Output}from"@angular/core"exportclassFavoriteComponent{@Output()change=newEventEmitter()onClick(){this.change.emit({name:"张三"})}}<!--父组件模板--><app-favorite(change)="onChange($event)"></app-favorite>//父组件类exportclassAppComponent{onChange(event:{name:string}){console.log(event)}}

组件生命周期Angular学习之聊聊组件通讯和组件生命周期插图3

1、挂载阶段

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

1)、constructor

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

exportclassChildComponent{constructor(privatetest:TestService){console.log(this.test)//"test"}}

2)、ngOnInit

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

<app-childname="张三"></app-child>exportclassChildComponentimplementsOnInit{@Input("name")name:string=""ngOnInit(){console.log(this.name)//"张三"}}

3)、ngAfterContentInit

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

<app-child><div#box>HelloAngular</div></app-child>exportclassChildComponentimplementsAfterContentInit{@ContentChild("box")box:ElementRef<HTMLDivElement>|undefinedngAfterContentInit(){console.log(this.box)//<div>HelloAngular</div>}}

4)、ngAfterViewInit

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

<!--app-child组件模板--><p#p>app-childworks</p>exportclassChildComponentimplementsAfterViewInit{@ViewChild("p")p:ElementRef<HTMLParagraphElement>|undefinedngAfterViewInit(){console.log(this.p)//<p>app-childworks</p>}}

2、更新阶段

1)、ngOnChanges

当输入属性值发生变化时执行,初始设置时也会执行一次,顺序优于 ngOnInit

不论多少输入属性同时变化,钩子函数只会执行一次,变化的值会同时存储在参数中

参数类型为 SimpleChanges,子属性类型为 SimpleChange

对于基本数据类型来说, 只要值发生变化就可以被检测到

对于引用数据类型来说, 可以检测从一个对象变成另一个对象, 但是检测不到同一个对象中属性值的变化,但是不影响组件模板更新数据。

基本数据类型值变化

<app-child[name]="name"[age]="age"></app-child><button(click)="change()">change</button>exportclassAppComponent{name:string="张三";age:number=20change(){this.name="李四"this.age=30}}exportclassChildComponentimplementsOnChanges{@Input("name")name:string=""@Input("age")age:number=0ngOnChanges(changes:SimpleChanges){console.log("基本数据类型值变化可以被检测到")}}

引用数据类型变化

<app-child[person]="person"></app-child><button(click)="change()">change</button>exportclassAppComponent{person={name:"张三",age:20}change(){this.person={name:"李四",age:30}}}exportclassChildComponentimplementsOnChanges{@Input("person")person={name:"",age:0}ngOnChanges(changes:SimpleChanges){console.log("对于引用数据类型,只能检测到引用地址发生变化,对象属性变化不能被检测到")}}

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

3)、ngAfterContentChecked:内容投影更新完成后执行。

4)、ngAfterViewChecked:组件视图更新完成后执行。

3、卸载阶段

1)、ngOnDestroy

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

exportclassHomeComponentimplementsOnDestroy{ngOnDestroy(){console.log("组件被卸载")}}

产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;

日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉

本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;

部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入

如若转载,请注明出处:https://www.chanpinyuan.cn/28321.html;
(0)
上一篇 2022年12月1日 下午4:18
下一篇 2022年12月1日 下午4:18

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部