Angular2中组件间通信

主要学习内容：常见的组件通信方式有：（目前学习到三种，后期遇到其他可更新）
1.父组件向子组件传递数据（输入属性）
2.子组件向父组件传递数据（输出属性）
3.为了降低父组件和子组件的耦合性 采用中间人模式传递数据（中间人模式）
========================================
1.输入属性：@input()装饰器修饰的属性

//定义ChildComponent为子组件 AppComponent为父组件
//1.为子组件添加属性 
@input()
name:string;
@input()
title:string;
//2.在页面显示子组件模板
<div>
ChildComponent
</div>
<div>name:{{name}},title{{title}}</div>
//3 定义父组件属性
  parentName:string;
//4 在页面显示父组件模板 [(ngModel)]为双向绑定
<div>
 AppComponent
</div>
<input type="text" placeholder="父组件" [(ngModel)]="parentName">
<app-child [name]="parentName" [title]="子组件"></app-child>
*结果为：父组件输入的parentName改变会使子组件的值改变 
        子组件的值改变不会使父组件的值改变
*

2.输出属性@output() EventEmmit方法
EventEmitter方法中需要加入泛型，可以实现数据的传递和接收功能 在output中为传递功能，通过emit方法传递
output可理解为指令的方法绑定，子组件传递数据输出到父组件中。子组件定义绑定事件的方法，但是方法体写在父组件中

//1.子组件定义 并设置学生类通过serInterval方法使学生类的age不断改变 改变一次创建一个新的学生类 通过EventEmitter将学生类传递到父组件中去
export class ChildComponent implements OnInit {
  name = 'zhangsan';
  age: number;
  @Output()
  ageout: EventEmitter<Student> = new EventEmitter();
  constructor() {
    setInterval(() => {
      const student: Student = new Student(this.name, 100 * Math.random());
      this.age = student.age;
      this.ageout.emit(student);
    }, 1000);
  }
  ngOnInit() {
  }
}
export class Student {
  constructor(
    public name: string,
    public age: number,
  ) { }
}
//子组件页面定义 检查是否年龄是每秒中变化的
<p>
  子组件
</p>
<div>姓名：{{name}} ,年龄{{age|number:'2.2-2'}}</div>
//父组件页面模板 将定义的EventEmitter的ageout设置绑定事件，但是方法体在父组件中
 <app-child (ageout)="showcontext($event)"></app-child>
<div>父组件</div>
<div>姓名：{{student.name}},年龄：{{student.age|number:'2.2-2'}}
</div>
//父组件定义 设置父组件中也显示学生类 和方法函数
export class AppComponent {
  constructor() { }
  student: Student = new Student('', 0);
  showcontext(event: Student) {
    this.student = event;
  }
}

3.中间人模式 组件和组件的松耦合
示例图：

1组件就属于中间人组件（画的有点丑）
设appcomponent为中间组件 进行child组件和test组件的联系

//新建test组件 在child组件中设置EventEmitter发送数据
 @Output()
  test: EventEmitter<Student> = new EventEmitter();
  testContext(event) {
    this.test.emit(new Student(this.name, this.age));
  }
}
//child组件页面设置 通过点击函数将数据传输出去
<p>
  子组件
</p>
<div>姓名：{{name}} ,年龄{{age|number:'2.0-0'}}</div>
<div>
  <input type="button" value="test" (click)="testContext($event)">
</div>
//app组件作为中间人，接收child组件传入的数据，然后传输给test组件 test组件就会接受数据
//app组件页面设置 app为中间人 将test和child组件都插入 test组件通过属性绑定接收数据
<app-child (test)="testHandler($event)"></app-child>
<app-test [student]="student"></app-test>
//app组件中定义该方法
 testHandler(event: Student) {
    this.student = event;
  }
 //在test组件中接收数据
  @Input()
  student: Student;
  //test页面模板
  <p>
  test works!
</p>
<div>{{student.name}},{{student.age|number:'2.0-0'}}</div>