组件之间的 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 正在将表单数据添加到数组，但它将如何发出？调试点未命中发射代码。

2. 我可以在 app.component.html 文件中直接将数据从第一个组件传递到第二个组件吗？还是我需要先在 app.component.ts 文件中处理它？<​​/p>

请注意我是 Angular 的新手。

任何建议都会有所帮助。

Answer 1

Angular has top to bottom data flow approach. It means that the child gets from parent via input and if the child has to tell something to the parent , then it has to emit what it want to tell explicitly

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

parent.component.ts : Parent Gives to child toffee via input or square brackets[ ]

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