父传子(使用自定义属性)
1.父组件引入子组件
<child-component [msg]='msg'></child-component>
2.子组件引入input模块
@input() msg:any//在子组件中使用接收
3.父组件向子组件不仅可以传值也可以传方法甚至可以通过this关键字将整个父组件传过去
//父组件
<app-child [msg]='msg'></app-child>
//子组件
//引入input模块
import { Component, OnInit,Input } from '@angular/core';
//获取传值
@Input() msg:any
子传父
第一种
1.引入子组件,在子组件上加上id,这样可以在父组件逻辑层中可以找到它
2.在父组件中引入ViewChild模块,父组件可以通过@ViewChild('#id') chiidData:any接收
//父组件
<app-child #childCom></app-child>
import { Component, OnInit,ViewChild } from '@angular/core';
@ViewChild('childCom') childRoot:any
//就可以通过this.childRoot.****访问子组件中的属性和方法了
第二种(使用事件驱动,类似vue的自定义事件)
//子组件
//1.引入驱动模块
import { Component, OnInit,Output,EventEmitter } from '@angular/core';
//2.定义输出事件
@Output() public goOut=new EventEmitter()
//3.触发输出事件传值
this.goOut.emit('pppp')
//父组件
<app-child (goOut)='goDie($enent)'></app-child>
//goDie(e){}接收传值(e就是子组件传过来的值)