代码之家 › 专栏 › 技术社区 › lesnar

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

angular-components typescript angular

lesnar · 技术社区 · 6 年前

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

第一部分:

@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

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

}

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

我的问题/疑虑:

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

请注意我是新来的角度。

任何建议都会有帮助的。

2 回复 | 直到 6 年前

Renil Babu 6 年前

角度有自上而下的数据流方法。这意味着子对象通过输入从父对象获得,如果子对象必须告诉父对象一些事情,那么它必须显式地发出它想要告诉的内容

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

}

子组件.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")
  }

Ashish Koshy 6 年前

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