Angular2 组件间通过@Input @Output通讯

父组件传给子组件：

子组件设置@Input属性,父组件即可通过设置html属性给子组件传值。
子组件：

  @Input() title:string;
  _name:string = '';

  @Input() set name(name:string) {
    this._name=(name&&name.trim())||'';
  }

上面的代码设置了两个可供父组件传入的属性:title和name,当设置name属性时，set name(name:string)方法会执行,如果不需要处理setter，那么用title的形式，一行代码声明即可.

父组件调用:

<app-header [title]="title" name="姓名"></app-header>

调用方法有两种，属性名用中括号包围的title，值title是父组件中的对象名，而name没有用中括号，后面的值就是传给子组件的字符串。当然，不用中括号，也可以用{{name}}传对象的值。

如果要监听传入属性值的变化，可以在子组件实现OnChanges（@angular/core中）接口：

export class HeaderComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes['title']);
  }
  @Input() title:string;
  _name:string = '';

  @Input() set name(name:string) {
    this._name=(name&&name.trim())||'';
  }

}

SimpleChanges 是一个用属性名作key的数组，通过属性名取出对象，对象里包含该属性变化前(previousValue)后(currentValue)的值。

父组件监听子组件变化

子组件通过@Output()暴露EventEmitter，父组件在声明子组件时增加EventEmitter的回调方法，子组件在需要的时候弹射事件，父组件的回调方法里就能收到。
子组件：

export class HeaderComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes['title']);
  }
  @Input() title:string;
  _name:string = '';

  @Input() set name(name:string) {
    this._name=(name&&name.trim())||'';
  }
  //声明事件发射器
  @Output() checkEmitter=new EventEmitter<boolean>();
  //用于绑定checkbox的checked属性
  isChecked=true;

  toggle() {
    this.isChecked=!this.isChecked;
    //发射事件
    this.checkEmitter.emit(this.isChecked);
  }
}

子组件模板:

<p>
  {{title}}
</p>
<p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p>

父组件中声明:

<app-header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>

父组件事件回调接收:

export class AppComponent implements AfterViewInit{
  ngAfterViewInit() {

  }
  onCheckedChange(isChecked:boolean) {
    console.log("checkbox选中状态："+isChecked);
  }
}

组件之间通讯-使用服务通讯模式

一、定义服务

import { Injectable } from ‘@angular/core‘;
 import {Subject}from"rxjs/Subject";
 @Injectable()
 export class CService {
  private outputTitle = new Subject();
   //订阅
 //声明变量 订阅Observer
   output$ = this.outputTitle.asObservable();
   //推送  调用next方法 Subject会向所有已经在其上注册的Observer多路推送 theValue
   UpData(message:any) {
     this.outputTitle.next(message);
   }
 }

2、子组件发布消息（）

       首先注入服务cs : CService

    this.CS.UpData({title:"铃铛宠物",ico:""});//推送数据更新

3、目标组件订阅该消息，多个目标可同时订阅
    rms为已注入的服务 rms:CService
   
 
 

  
  

   
     
   
   ngAfterViewInit
   
   ():
   
    
   
   void
   
    
   
   {
  
  
  
  

   
       
   
   this
   
   .
   
   rms
   
   .
   
   output$
   
   .
   
   subscribe
   
   (
   
   v=>
   
   {
  
  
  
  

   
         
   
   console
   
   .
   
   log
   
   (
   
   v
   
   ,new
   
    
   
   Date
   
   ())
   
   ;
  
  
  
  

   
       
   
   }
   
   )
  
  
  
  

   
     
   
   }
  
  
  
  

   
   

  
  
 
 
延伸阅读：

观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

我们可以使用日常生活中，期刊订阅的例子来形象地解释一下上面的概念。期刊订阅包含两个主要的角色：期刊出版方和订阅者，他们之间的关系如下：

• 期刊出版方 - 负责期刊的出版和发行工作

• 订阅者 - 只需执行订阅操作，新版的期刊发布后，就会主动收到通知，如果取消订阅，以后就不会再收到通知

在观察者模式中也有两个主要角色：Subject (主题) 和 Observer (观察者) 。它们分别对应例子中的期刊出版方和订阅者。

原文：https://www.pocketdigi.com/20170125/1555.html