Angular 通过Input/Output父子组件简单通信交互

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/idomyway/article/details/82467245

前言

    Angular中组件交互的方式有好多种，包含了通过Input/Output实现的指令通信交互，
    通过服务实现组件交互，在父子组件中最常用的，最简单方便的就是通过Input/Output实现的指令通信交互。

• Input相当于指令的值绑定，是将父作用域的值“输入”到子作用域中，然后子作用域进行相关处理。
• Output相当于指令的方法绑定，子作用域触发事件执行响应函数，而响应函数方法体则位于父作用域中，相当于将事件“输出到”父作用域中，在父作用域中处理。

需求：

    在子组件中，通过chartVisible变量 控制子组件某个元素的显示，子组件关闭时改变父组件的变量恢复初始值。

<echarts-win  #chartWin  (close)="closeWin($event)" 
               [chartVisible]="extendChartVisible" ></echarts-win>

    子组件：

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

@Input('chartVisible') chartVisible;//声明
@Output() close=new EventEmitter();//声明

closeWin(){
    this.chartVisible = false;
    this.close.emit(this.chartVisible);//close绑定触发
  }

父组件：

extendChartVisible=false;

closeWin($event){
      this.extendChartVisible = $event;//$event包含了子组件传的参数，在这里只传了一个值
  }