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

Question

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

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

第一个组件：

添加用户：

@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添加到数组中，但是将如何发出它呢？调试点没有达到发射代码。

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：父母通过输入或方括号[]

给孩子太妃糖

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