angular子组件给父组件传参通信

子传父(ViewChild方法)

父:

<app-child #child></app-child>
<button (click)="getMsg()">获取子组件的msg</button>
<button (click)="getChildFun()">调用子组件的fun方法</button>

import {Component,OnInit,ViewChild} from '@angular/core';

@Compponent({
	selector:'app-home',
	templateUrl:'./home.component.html',
	styleUrls:['./home.component.scss'],
})

export class HomeComponent implements OnInit{
	@ViewChild('child') child:any; //获取子组件 
	constructor(){}
	ngOnInit(){
		
	}
	//获取子组件数据
	getMsg(){
		alert(this.child.msg)
	}
	//调用子组件方法
	getChildFun(){
		this.child.fun();
	}
}

子:

<div>子组件</div>

import {Component,OnInit} from '@angular/core';

@Compponent({
	selector:'app-child',
	templateUrl:'./child.component.html',
	styleUrls:['./child.component.scss'],
})

export class ChildComponent implements OnInit{
	public msg:string="子组件的msg";
	
	constructor(){}
	ngOnInit(){
		
	}
	fun(){
		alert("我是子组件的方法")
	}
}

子传父(Output和EventEmitter方法)

子:

<div>子组件</div>
<button (click)="sendParent()">通过@Output给父组件广播(传递)数据</button>

import {Component,OnInit,Output,EventEmitter} from '@angular/core';

@Compponent({
	selector:'app-child',
	templateUrl:'./child.component.html',
	styleUrls:['./child.component.scss'],
})

export class ChildComponent implements OnInit{
	@Output() public outer=new EventEmitter();
	public msg:string="子组件的msg";
		
	constructor(){}
	ngOnInit(){
		
	}
	sendParent(){
		this.outer.emit(this.msg)
	}
}

父:

<app-child (outer)="getChildFun($event)"></app-child>
<div>父组件</div>

import {Component,OnInit} from '@angular/core';

@Compponent({
	selector:'app-home',
	templateUrl:'./home.component.html',
	styleUrls:['./home.component.scss'],
})

export class HomeComponent implements OnInit{ 
	constructor(){}
	ngOnInit(){
		
	}
	//子组件调用outer,触发getChildFun并传参过来
	getChildFun(e){
		console.log(e) //msg: '子组件的msg'
	}
}