Angular核心-父子间组件传递数据-重难点
📒博客首页:蔚说的博客 |
---|
🎉欢迎关注🔎点赞👍收藏⭐️留言📝 |
🙏作者水平很有限,如果发现错误,求告知,多谢! |
🌺有问题可私信交流!!! |
(达内教育学习笔记)仅供学习交流 |
Angular核心-父子间组件传递-重难点 |
Vue.js和Angular中的父子间消息传递原理一样,都可以用口诀:“Props Down,Event Up”
方向一:父=》子传递数据
父组件通过“子组件的自定义属性”向下传递数据给子组件。
步骤:
- parent.ts:父组件创建数据
userName = ‘苍茫大地’ - parent.html:父组件将自己的数据绑定给子组件的属性
<app-myc01-child2-photo [child2Name]="userName"></app-myc01-child2-photo>
- child2.ts子组件定义扩展属性
//普通属性不能被父组件传值
//child2Name:string = ''
//输入型属性:父组件可以利用这种属性传值进来
//得使用装饰器装饰一下
//装饰器要紧挨着要装饰的输入型属性
//并且一个装饰器只能管一个
//有很多输入型属性就必须写多个装饰器
@Input()//声明为“输入型属性”
child2Name:string = ''
- child2.ts子组件使用自定义属性
<h2>{{child2Name}}的照片墙</h2>
方向二:子=》父
子组件通过触发特定事件(其中携带数据),把数据传递给父组件(父组件提供事件处理方法)
- Child.ts:自定义事件发射器–输出属性
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
//造一个事件发射器
//输出型属性,可以向父组件输出数据
@Output()
private cryEvent = new EventEmitter()
写一个事件发射数据
doModify(){
console.log(this.userInput)
//子组件此时想发射数据给父组件
this.cryEvent.emit(this.userInput)
}
- 在父组件中找到子组件的模块:监听子组件的事件
<app-myc01-child1-modify (cryEvent)="doCry($event)"></app-myc01-child1-modify>
//$even是用于接收子组件发射的数据
- 在ts文件中接收使用子组件传递的数据
doCry(e: any){
console.log('parent.docry():')
console.log(e)
this.userName = e
}
//e就是子组件想传递给父组件的数据
父子组件传递数据的简便方法:
父组件直接使用子组件的引用:使用#为子组件声明识别符
<div #c0 ></div>
<app-myc01 #c1></app-myc01>
<br>
<app-myc02 #c2 ></app-myc02>
在ts文件里:
@ViewChild('c0',{static:true})//这个c0表示组件c1
private c0: any;//这个c0是自己起的名字,与组件c0绑定
@ViewChild('c1',{static:true})
private c1: any;
提示:ViewChild装饰器用于将子组件识别符与某个属性关联起来,第一个参数必须是已经存在的子组件识别符(不带#),第二个参数static指定该组件是否为“静态组件”—不会有时有时无的组件(比如ngIf,ngFor)
注意:
通过“ViewChild”-视图组件方式,父组件可以获得任意子组件中的数据,在一定程度上违反了“最少知识法则”
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=dfhgwhbq9ysr