Angular 4组件之间的通信不起作用

Question

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

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

第一部分：

Adduser ：

@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(){

  }
}

第一个组件的HTML代码：

  <div class="form-group"> <label for="formGroupExampleInput">Username</label> <input type="text" class="form-control" [(ngModel)]="username"> </div> <div class="form-group"> <label for="formGroupExampleInput2">Email</label> <input type="text" class="form-control" [(ngModel)]="email"> </div> <button type="button" class="btn btn-primary" [disabled]="username=== '' || email ===''" (click)="addUser()">AddUser</button> <div class="divider"></div> 

第二个组件 - > processuser

ts文件

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

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

  @Input()users:Array<{username:string,email:string}>=[];
  constructor() { }

  ngOnInit() {
  }

}

第二个组件的HTML代码：

 <button type="button" class="btn btn-primary" [disabled]="username=== '' || email ===''" (click)="processUser()">ShowUsers</button> <div class="alert alert-info" role="alert" *ngFor="let user of users "> <strong>user.username </strong> <strong>user.email </strong> has been processed. </div> 

以及我使用它们的主要应用程序组件：

 <div class="container"> <app-adduser (users)="addedUser($event)"></app-adduser> <app-processuser [users]=""></app-processuser> </div> 

我的问题/怀疑：

1. 第一个组件Adduser将formdata添加到数组但是它将如何发出？ 调试点没有命中emit代码。

2. 我可以直接将数据从第一个组件传递到app.component.html文件中的第二个组件吗？ 或者我是否需要先在app.component.ts文件中处理它？

请注意我是Angular的新手。

任何意见将是有益的。

Answer 1

Angular有自上而下的数据流方法。 这意味着孩子通过输入从父母那里获得，如果孩子必须告诉父母，那么它必须发出它想要明确告诉的内容

<parent-component>
  <child-component (tellParent)="tellParent($event)" [giveToChild]="giveToChild"> 
  </child-component>
</parent-component>

parent.component.ts：Parent通过输入或方括号[]给孩子太妃糖

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

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

  giveToChild:string = 'Toffee';

  constructor() { }

  ngOnInit() {
  }

  tellParent(childResponse){
     console.log(childResponse) // "Thanks dada and mama"
  }

}

child.component.ts

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")
  }

Answer 2

主要模板：

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

子组件：

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

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

父组件：

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