父子组件通讯

组件传值 事件绑定

输入 Input属性通常接收数据值。 输出 Output属性暴露事件生产者，如 EventEmitter 对象。

//父组件
<app-test-details [hero]="hero" (setHero)="setHeroName($event)"></app-test-details>
//接收子组件事件
setHeroName(hero: Hero) {
    this.heros.forEach(val => {
      if (val.id === hero.id) {
        val.name = hero.name;
      }
    });
}
//子组件
import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
export class TestDetailsComponent implements OnInit {
  //接收父组件数据
  @Input() hero: Hero;
  //@Input('newHero') hero: Hero;  //起别名  （不推荐起别名）
  //输出方法
  @Output() setHero = new EventEmitter();
  updateHero() {
     //将数据传递给父组件   调用父组件事件
     this.setHero.emit(this.hero);
  }
}

父组件调用子组件事件

1.父组件与子组件通过本地变量互动

#hero

<app-test-details #child [hero]="hero"></app-test-details>
<button (click)="child .testParent()">click</button>

//子组件中定义方法
testParent() {
   console.log("子组件方法被调用")
}

2.父组件通过@ViewChild()调用子组件事件

@ViewChild()

import {Component, OnInit, ViewChild} from '@angular/core';
import {TestDetailsComponent} from '../test-details/test-details.component';
export class TestComponent implements OnInit {
  @ViewChild(TestDetailsComponent)
  child: TestDetailsComponent;
  constructor() {}
  clickTest() {
   //调用子组件事件
    this.child.testParent();
  }
}

3.父组件和子组件通过服务来通讯