编辑文章

描述:

封面图上传：

点击上传图片

### Angular8 子组件向父组件传递参数
废话少说，上代码
#### 父组件 html
注意 (childSelectIndex)要和子组件output的名字一致
```html
<keepbook-add (childSelectIndex)="onChildSelectIndexChange($event)"></keepbook-add>
```
#### 父组件TS
```js
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-keepbook-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.less']
})
export class IndexComponent implements OnInit {
  constructor() { }

ngOnInit() {
  }
  /**
   * 子组件和父组件通信
   * @param event 
   */
  onChildSelectIndexChange(event){
     console.log(event);
  }
}
```
#### 子组件TS
关键代码,向父组件传值
``@Output() childSelectIndex : EventEmitter<any> = new EventEmitter();``
```js
import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'keepbook-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.less']
})
export class AddComponent implements OnInit {
//
@Output() childSelectIndex : EventEmitter<any> = new EventEmitter();

constructor() { }

ngOnInit() {
  }
/**
调用该方法传递值给父组件
**/
  onOk() {
     this.childSelectIndex.emit('传递给父组件的值');
  }
}

```