angular2之组件通讯

1. 定义父组件，在父组件中以路由插座形式引入子组件，定义相关输入输出属性
2. 可以在同一模块内部定义多个组件，将一个组件引入另一个组件中去；也可以该模块整体导出，将该模块导入到其他模块，这样此模块中的组件就能引入到其他模块中，实现组件复用。当组件复用程度较高时，可以考虑将组件设置为公共组件。

1. 定义子组件

// edit-userInfo.component.html<div>  <p class="row">    <label>姓名:</label>    <input type="text" pInputText [(ngModel)]="userName" name="userName" size="26" required disabled placeholder="姓名" />  </p>  <p class="row">    <label>手机:</label>    <input type="text" pInputText [(ngModel)]="userPhone" name="userPhone" size="26" required placeholder="手机号" #box1 (blur)="checkPhone(box1.value)">  </p></div><button type="button" label="提交" (click)="confirm()"></button>

---

// edit-userInfo.component.tsimport { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';@Input() displayEditUserInfo: boolean;@Output() displayEditUserInfoChange = new EventEmitter<boolean>();@Output() succOrFail = new EventEmitter<string>();confirm() {  this.displayEditUserInfoChange.emit(false);  this.userInfo.userName = this.userName;  this.userInfo.userPhone = this.userPhone;  this.editUserinfoService.updateUser(this.userInfo).then(res => {    if (res.status == "S") {      this.succOrFail.emit("success");      alert("修改成功!");    }  })}

2. 定义父组件

// creat-member.component.html<div>top</div><p (click)="alterMyInfo()">修改信息</p><app-edit-userinfo [displayEditUserInfo]="displayEditUserInfo" (displayEditUserInfoChange)="editUserInfoEvent($event)" (succOrFail)="judgeSuccOrFail($event)"></app-edit-userinfo><div>bottom</div>

---

// creat-member.component.tsprivate displayEditUserInfo: boolean = false;alterMyInfo() {  this.displayEditUserInfo = true;}editUserInfoEvent(displayEditUserInfo: boolean) {  this.displayEditUserInfo = displayEditUserInfo;}judgeSuccOrFail(obj: string) {  if (obj == "success") {    console.log("Success");  }}