| 博客首页：蔚说的博客 |
|---|
| 欢迎关注点赞收藏⭐️留言 |
| 作者水平很有限，如果发现错误，求告知，多谢！ |
| 有问题可私信交流！！！ |
| （达内教育学习笔记）仅供学习交流 |
Angular核心-父子间组件传递-重难点
|
Vue.js和Angular中的父子间消息传递原理一样，都可以用口诀：“Props Down，Event Up”
方向一：父=》子传递数据父组件通过“子组件的自定义属性”向下传递数据给子组件。
步骤：
- parent.ts:父组件创建数据
userName = ‘苍茫大地’ - parent.html:父组件将自己的数据绑定给子组件的属性
- child2.ts子组件定义扩展属性
//普通属性不能被父组件传值 //child2Name:string = '' //输入型属性：父组件可以利用这种属性传值进来 //得使用装饰器装饰一下 //装饰器要紧挨着要装饰的输入型属性 //并且一个装饰器只能管一个 //有很多输入型属性就必须写多个装饰器 @Input()//声明为“输入型属性” child2Name:string = ''
- child2.ts子组件使用自定义属性
方向二：子=》父{{child2Name}}的照片墙
子组件通过触发特定事件（其中携带数据），把数据传递给父组件（父组件提供事件处理方法）
- 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)
}
- 在父组件中找到子组件的模块：监听子组件的事件
//$even是用于接收子组件发射的数据
- 在ts文件中接收使用子组件传递的数据
doCry(e: any){
console.log('parent.docry():')
console.log(e)
this.userName = e
}
//e就是子组件想传递给父组件的数据
父子组件传递数据的简便方法：
父组件直接使用子组件的引用：使用#为子组件声明识别符
在ts文件里：
@ViewChild('c0',{static:true})//这个c0表示组件c1
private c0: any;//这个c0是自己起的名字，与组件c0绑定
@ViewChild('c1',{static:true})
private c1: any;
提示：ViewChild装饰器用于将子组件识别符与某个属性关联起来，第一个参数必须是已经存在的子组件识别符（不带#），第二个参数static指定该组件是否为“静态组件”—不会有时有时无的组件（比如ngIf，ngFor）
注意：
通过“ViewChild”-视图组件方式，父组件可以获得任意子组件中的数据，在一定程度上违反了“最少知识法则”
