angular8 — 父子组件之前的通信 angular

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 = https://www.it610.com/article/new EventEmitter; constructor() { }ngOnInit() { this.taskData.emit("我是在子组件中获取到的值，需要传给父组件"); } }

父组件：investment-profile.component.html

父组件：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 = https://www.it610.com/article/$event; // 获取到子组件传过来的值，并把值存入变量taskData } }

到此已完成子组件给父组件传值
2. 父组件传值给子组件（我就把父组件刚刚接收到的值传给其它子组件好了）
父组件：investment-profile.component.html

【angular8 — 父子组件之前的通信】子组件：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() {} }