angular-父子组件通信

在vue中，父子组件的通信一般是单向的，父组件把某个数据传给子组件，而子组件不能直接修改这个数据，需要通过自定义事件回传给父组件。
angular是如何实现的呢？
首先定义两个组件：

ng g component components/father
ng g component components/child

子组件接收父组件的数据，我们需要使用@Input()装饰器，而子组件修改了数据做事件回传时，则需要@Output()装饰器。

  @Input() listdata:any; // 接收父组件的数据
  @Output() addItem = new EventEmitter(); // 回传给父组件的方法

在使用@Output()装饰器时，又需要引入EventEmitter，因此我们都需要import进来：

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

下面是一个简单的实例。
在父组件通过延时模拟ajax，往子组件传递一个数组，子组件接收到数据后进行列表渲染；
然后点击按钮，可以新增一条数据，新增的数据必须通过自定义事件回传给父组件，父组件接收到数据后，在数组后面push一条。
以上就是一个完整的单向数据流动。

father.component.html:

<app-child [listdata]="listdata"
 (addItem)="addListdata($event)"
>
</app-child>

father.component.ts:

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

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.scss']
})
export class FatherComponent implements OnInit {
  public listdata:Array<Object>; // 声明列表数据

  constructor() { }
 
  ngOnInit(): void {
    setTimeout(()=>{
      this.listdata =  [{id:1,name:'a'},{id:2,name:'b'}]
    },1000);
  }
  addListdata(e){
    // console.log(e)
    this.listdata.push(e)
  }

}

child.component.html:

<ul>
    <li *ngFor="let item of listdata">
        {{item.id}}---{{item.name}}
    </li>
</ul>

<button (click)="addMethod()">增加一条数据</button>

child.component.ts:

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
 //单向数据流动，子组件接收父组件的数据，然后通过自定义事件，将改变后的数据回传父组件
export class ChildComponent implements OnInit {
  @Input() listdata:any; // 接收父组件的数据
  @Output() addItem = new EventEmitter(); // 回传给父组件的方法
  constructor() { }

  ngOnInit(): void {
  }
  addMethod(){ //增加一条数据
    let len = this.listdata.length + 1
    let obj = {id:len,name:"add item"}
    this.addItem.emit(obj);//传给父组件obj这个数据
  }

}