父?jìng)髯樱ㄊ褂米远x屬性)
1.父組件引入子組件
<child-component [msg]='msg'></child-component>
2.子組件引入input模塊
@input() msg:any//在子組件中使用接收
3.父組件向子組件不僅可以傳值也可以傳方法甚至可以通過(guò)this關(guān)鍵字將整個(gè)父組件傳過(guò)去
//父組件
<app-child [msg]='msg'></app-child>
//子組件
//引入input模塊
import { Component, OnInit,Input } from '@angular/core';
//獲取傳值
@Input() msg:any
子傳父
第一種
1.引入子組件,在子組件上加上id,這樣可以在父組件邏輯層中可以找到它
2.在父組件中引入ViewChild模塊邑退,父組件可以通過(guò)@ViewChild('#id') chiidData:any接收
//父組件
<app-child #childCom></app-child>
import { Component, OnInit,ViewChild } from '@angular/core';
@ViewChild('childCom') childRoot:any
//就可以通過(guò)this.childRoot.****訪問(wèn)子組件中的屬性和方法了
第二種(使用事件驅(qū)動(dòng)轧膘,類似vue的自定義事件)
//子組件
//1.引入驅(qū)動(dòng)模塊
import { Component, OnInit,Output,EventEmitter } from '@angular/core';
//2.定義輸出事件
@Output() public goOut=new EventEmitter()
//3.觸發(fā)輸出事件傳值
this.goOut.emit('pppp')
//父組件
<app-child (goOut)='goDie($enent)'></app-child>
//goDie(e){}接收傳值(e就是子組件傳過(guò)來(lái)的值)