組件傳值 事件綁定

輸入 Input屬性通常接收數(shù)據(jù)值。 輸出 Output屬性暴露事件生產(chǎn)者，如 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 {
  //接收父組件數(shù)據(jù)
  @Input() hero: Hero;
  //@Input('newHero') hero: Hero;  //起別名  （不推薦起別名）
  //輸出方法
  @Output() setHero = new EventEmitter();
  updateHero() {
     //將數(shù)據(jù)傳遞給父組件   調(diào)用父組件事件
     this.setHero.emit(this.hero);
  }
}

父組件調(diào)用子組件事件

1.父組件與子組件通過本地變量互動

#hero

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

//子組件中定義方法
testParent() {
   console.log("子組件方法被調(diào)用")
}

2.父組件通過@ViewChild()調(diào)用子組件事件

@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() {
   //調(diào)用子組件事件
    this.child.testParent();
  }
}

3.父組件和子組件通過服務(wù)來通訊