Angular8 子组件向父组件传递参数

废话少说，上代码

父组件 html

注意 (childSelectIndex)要和子组件output的名字一致

  1. <keepbook-add (childSelectIndex)="onChildSelectIndexChange($event)"></keepbook-add>

父组件TS

  1. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4.   selector: 'app-keepbook-index',
  5.   templateUrl: './index.component.html',
  6.   styleUrls: ['./index.component.less']
  7. })
  8. export class IndexComponent implements OnInit {
  9.   constructor() { }
  11.   ngOnInit() {
  12.   }
  13.   /**
  14.    * 子组件和父组件通信
  15.    * @param event 
  16.    */
  17.   onChildSelectIndexChange(event){
  18.      console.log(event);
  19.   }
  20. }

子组件TS

关键代码,向父组件传值
@Output() childSelectIndex : EventEmitter<any> = new EventEmitter();

  1. import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  3. @Component({
  4.   selector: 'keepbook-add',
  5.   templateUrl: './add.component.html',
  6.   styleUrls: ['./add.component.less']
  7. })
  8. export class AddComponent implements OnInit {
  9. //
  10. @Output() childSelectIndex : EventEmitter<any> = new EventEmitter();
  12.   constructor() { }
  14.   ngOnInit() {
  15.   }
  16. /**
  17. 调用该方法传递值给父组件
  18. **/
  19.   onOk() {
  20.      this.childSelectIndex.emit('传递给父组件的值');
  21.   }
  22. }