angular8 — 父子组件之前的通信

1. 子组件传值给父组件

子组件：invest-profile-left.component.ts（子组件的html页面不需要其他操作）

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

@Component({
  selector: 'kt-invest-profile-left',
  templateUrl: './invest-profile-left.component.html',
  styleUrls: ['./invest-profile-left.component.scss']
})
export class InvestProfileLeftComponent implements OnInit {
  @Output() taskData = new EventEmitter;
  constructor() {
  }

  ngOnInit() {
  	this.taskData.emit("我是在子组件中获取到的值，需要传给父组件");
  }
}

父组件：investment-profile.component.html

<div>
	<kt-invest-profile-left (taskData)="getTaskData($event)"></kt-invest-profile-left>
	<kt-invest-profile-tasks></kt-invest-profile-tasks>
</div>

父组件：investment-profile.component.ts

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

@Component({
  selector: 'kt-investment-profile',
  templateUrl: './investment-profile.component.html',
  styleUrls: ['./investment-profile.component.scss']
})
export class InvestmentProfileComponent implements OnInit {
  public taskData;
  constructor() { 
  }
  ngOnInit() {
  }
  public getTaskData($event) {
    this.taskData = $event;	// 获取到子组件传过来的值，并把值存入变量taskData 
  }
}

到此已完成子组件给父组件传值

2. 父组件传值给子组件（我就把父组件刚刚接收到的值传给其它子组件好了）

父组件：investment-profile.component.html

<div>
	<kt-invest-profile-left (taskData)="getTaskData($event)"></kt-invest-profile-left>
	<kt-invest-profile-tasks [taskData]="taskData"></kt-invest-profile-tasks>
</div>

子组件：invest-profile-tasks.component.ts

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

@Component({
  selector: 'kt-invest-profile-tasks',
  templateUrl: './invest-profile-tasks.component.html',
  styleUrls: ['./invest-profile-tasks.component.scss']
})
export class InvestProfileTasksComponent implements OnInit {
  @Input() taskData;	// 接收父组件传过来的值
  constructor() {
  }
  ngOnInit() {}
}