Angular 不工作部件之间的角度4通信

我无法在两个组件之间进行通信：

我有两个组件，一个用于保存用户名和电子邮件（请参见屏幕截图），另一个用于显示添加的用户。

第一部分：

@Output() messageToParent : EventEmitter<any> = new EventEmitter();

sendMessageToParent() 
{ 
   this.messageToParent.emit("message from child"); 
}

receiveMessageFromChild(message) 
{
   console.log(message); // Console reads : "message from child"
}

添加用户：

@Component({
  selector: 'app-adduser',
  templateUrl: './adduser.component.html',
  styleUrls: ['./adduser.component.css']
})




export class AdduserComponent implements OnInit {
  @Output('users') users = new EventEmitter<any[]>();
  listOfUsers: Array<{username:string,email:string}>=[];
 username:string="";
 email:string="";
  constructor() { }

  ngOnInit() {
  }

  addedUser(event:Event){
    console.log('emitUser event is called');
    this.users.emit(this.listOfUsers);
  }

  addUser(){
  this.listOfUsers.push( {username:this.username,email:this.email});
  }

  processUser(){

  }
}

@组件({
选择器：“应用程序添加用户”，
templateUrl:'./adduser.component.html'，
样式URL:['./adduser.component.css']
})
导出类AdduserComponent实现OnInit{
@输出（“用户”）用户=新的EventEmitter（）；
列表用户：数组=[]；
用户名：string=“”；
电子邮件：string=“”；
构造函数（）{}
恩戈尼尼特（）{
}
加法器（事件：事件）{
log（'emitUser事件被调用'）；
this.users.emit（this.listOfUsers）；
}
addUser（）{
this.listOfUsers.push（{username:this.username，email:this.email}）；
}
processUser（）{
}
}

第一个组件的HTML代码：

@Output() messageToParent : EventEmitter<any> = new EventEmitter();

sendMessageToParent() 
{ 
   this.messageToParent.emit("message from child"); 
}

receiveMessageFromChild(message) 
{
   console.log(message); // Console reads : "message from child"
}

用户名
电子邮件
地址用户

主模板：

<parent>
   <child (messageToParent) ="receiveMessageFromChild($event)"></child>
</parent>

Angular采用自上而下的数据流方法。这意味着子对象通过输入从父对象获取信息，如果子对象必须告诉父对象某些信息，则必须明确地发出它想要告诉的信息

child.component.ts

从'@angular/core'导入{Component，OnInit，Input}；
@组成部分({
选择器：'子组件'，
templateUrl:“./Child component.html”，
样式URL:['./子组件.css']
})
导出类ChildComponent实现OnInit{
@Input（）giveToChild:字符串
@Output（）tellParent=neweventemitter（）；
构造函数（）{}
恩戈尼尼特（）{
}
tellParentFunc（）{
这个.tellParent.emit（“谢谢爸爸妈妈”）
}

有一个完整的组件交互指南，您永远不会从输出中发出任何东西：addedUser方法永远不会在任何地方调用。当addUser（）时，您需要amit在您添加新用户后调用。并且您尚未发布应用程序组件的代码，因此我们不知道其addedUser方法的作用。并且您不会将任何内容作为输入传递给processuser组件：

[users]=”

。简言之，您需要阅读有关输入和输出的文档。

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

@Component({
  selector: 'Child-component',
  templateUrl: './Child-component.html',
  styleUrls: ['./Child-component.css']
})
export class ChildComponent implements OnInit {

  @Input() giveToChild:string
  @Output() tellParent = new EventEmitter<any>();

  constructor() { }

  ngOnInit() {

  }
  tellParentFunc(){
    this.tellParent.emit("Thanks dada and mama")
  }