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.ts
import { 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.ts
private displayEditUserInfo: boolean = false;
alterMyInfo() {
  this.displayEditUserInfo = true;
}
editUserInfoEvent(displayEditUserInfo: boolean) {
  this.displayEditUserInfo = displayEditUserInfo;
}
judgeSuccOrFail(obj: string) {
  if (obj == "success") {
    console.log("Success");
  }
}