Angular核心-父子间组件传递数据-重难点

Vue.js和Angular中的父子间消息传递原理一样，都可以用口诀：“Props Down，Event Up”

方向一：父=》子传递数据

父组件通过“子组件的自定义属性”向下传递数据给子组件。
步骤：

1. parent.ts:父组件创建数据
   userName = ‘苍茫大地’
2. parent.html:父组件将自己的数据绑定给子组件的属性

<app-myc01-child2-photo [child2Name]="userName"></app-myc01-child2-photo>
1

3. child2.ts子组件定义扩展属性

//普通属性不能被父组件传值
  //child2Name:string = ''
  //输入型属性：父组件可以利用这种属性传值进来
  //得使用装饰器装饰一下
  //装饰器要紧挨着要装饰的输入型属性
  //并且一个装饰器只能管一个
  //有很多输入型属性就必须写多个装饰器
  @Input()//声明为“输入型属性”
  child2Name:string = ''
1
2
3
4
5
6
7
8
9

4. child2.ts子组件使用自定义属性

<h2>{{child2Name}}的照片墙</h2>
1

方向二：子=》父

子组件通过触发特定事件（其中携带数据），把数据传递给父组件（父组件提供事件处理方法）

1. 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)
  }
1
2
3
4
5
6
7
8
9
10
11

2. 在父组件中找到子组件的模块：监听子组件的事件

<app-myc01-child1-modify (cryEvent)="doCry($event)"></app-myc01-child1-modify>
//$even是用于接收子组件发射的数据
1
2

3. 在ts文件中接收使用子组件传递的数据

  doCry(e: any){
    console.log('parent.docry():')
    console.log(e)
    this.userName = e
  }
  //e就是子组件想传递给父组件的数据
1
2
3
4
5
6

父子组件传递数据的简便方法：

父组件直接使用子组件的引用：使用#为子组件声明识别符

<div #c0 ></div>
    <app-myc01 #c1></app-myc01>
    <br>
    <app-myc02 #c2 ></app-myc02>
1
2
3
4

在ts文件里：

@ViewChild('c0',{static:true})//这个c0表示组件c1
  private c0: any;//这个c0是自己起的名字，与组件c0绑定
  @ViewChild('c1',{static:true})
  private c1: any;
1
2
3
4

提示：ViewChild装饰器用于将子组件识别符与某个属性关联起来，第一个参数必须是已经存在的子组件识别符（不带#），第二个参数static指定该组件是否为“静态组件”—不会有时有时无的组件（比如ngIf，ngFor）
注意：
通过“ViewChild”-视图组件方式，父组件可以获得任意子组件中的数据，在一定程度上违反了“最少知识法则”