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

父组件：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

子组件：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() {}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！