组件通讯，意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。

最近在项目上，组件跟组件之间可能是父子关系，兄弟关系，爷孙关系都有。。。。。我也找找了很多关于组件之间通讯的方法，不同的方法应用在不同的场景，根据功能需求选择组件之间最适合的通讯方式。下面我就总结一下关于组件通讯的N多种方法。

1.父→子 input

parent.ts

import { Component } from '@angular/core';@Component({ selector: 'page-parent', templateUrl: 'parent.html',})export class ParentPage { i: number = 0; constructor() { setInterval(() => { this.i++; }, 1000) }}

parent.html

<ion-header> <ion-navbar> <ion-title>Parent</ion-title> </ion-navbar></ion-header><ion-content padding> <h2>Parent</h2> <page-child [content]="i"></page-child></ion-content>

child.ts

import { Component,Input } from '@angular/core';@Component({ selector: 'page-child', templateUrl: 'child.html',})export class ChildPage {@Input() content:string; constructor() { }}

child.html

<ion-content padding>child:{{content}}</ion-content>

结果:

2.子→父 output

parent.ts

import { Component } from '@angular/core';@Component({ selector: 'page-parent', templateUrl: 'parent.html',})export class ParentPage { i: number = 0; numberIChange(i:number){ this.i = i; }}

parent.html

<ion-header> <ion-navbar> <ion-title>Parent</ion-title> </ion-navbar></ion-header><ion-content padding> <h2>Parent:{{i}}</h2> <page-child (changeNumber)="numberIChange($event)"></page-child></ion-content>

child.ts

import { Component, EventEmitter, Output } from '@angular/core';@Component({ selector: 'page-child', templateUrl: 'child.html',})export class ChildPage { @Output() changeNumber: EventEmitter<number> = new EventEmitter(); Number: number = 0; constructor() { setInterval(() => { this.changeNumber.emit(++this.Number); }, 1000) }}

child.html

<ion-content padding> child</ion-content>

结果：

3.子获得父实例

parent.ts

import { Component } from '@angular/core';@Component({ selector: 'page-parent', templateUrl: 'parent.html',})export class ParentPage { i:number = 0;}

parent.html

<ion-header> <ion-navbar> <ion-title>Parent</ion-title> </ion-navbar></ion-header><ion-content padding> <h1>parent: {{i}}</h1> <page-child></page-child></ion-content>

child.ts

import { Component, Input, EventEmitter, Output,Host,Inject,forwardRef } from '@angular/core';import{ParentPage} from '../parent/parent';@Component({ selector: 'page-child', templateUrl: 'child.html',})export class ChildPage { constructor( @Host() @Inject(forwardRef(() => ParentPage)) app: ParentPage) { setInterval(() => { app.i++; }, 1000); }}

child.html

<ion-content padding> child </ion-content>

结果：

4.父获得子实例

parent.ts

import {ViewChild, Component } from '@angular/core';import{ChildPage}from '../child/child';@Component({ selector: 'page-parent', templateUrl: 'parent.html',})export class ParentPage { @ViewChild(ChildPage) child:ChildPage; ngAfterViewInit() { setInterval(()=> { this.child.i++; }, 1000) }}

parent.html

<ion-header> <ion-navbar> <ion-title>Parent</ion-title> </ion-navbar></ion-header><ion-content padding> <h1>parent {{i}}</h1> <page-child></page-child></ion-content>

child.ts

import { Component, Input, EventEmitter, Output,Host,Inject,forwardRef } from '@angular/core';@Component({ selector: 'page-child', templateUrl: 'child.html',})export class ChildPage { i:number = 0;}

child.html

<ion-content padding><h2>child {{i}}</h2></ion-content>

结果：

5.service

parent.ts

import { Component } from '@angular/core';import{myService}from '../child/myService'@Component({ selector: 'page-parent', templateUrl: 'parent.html',})export class ParentPage { i:number=0; constructor(service:myService) { setInterval(()=> { service.i++; }, 1000) }}

parent.html

<ion-header> <ion-navbar> <ion-title>Parent</ion-title> </ion-navbar></ion-header><ion-content padding> <h1>parent {{i}}</h1> <page-child></page-child></ion-content>

child.ts

import { Component} from '@angular/core';import{myService}from "../child/myService"@Component({ selector: 'page-child', templateUrl: 'child.html',})export class ChildPage { constructor(public service:myService){ }}

child.html

<ion-content padding><h2>child {{service.i}}</h2></ion-content>

myService.ts

ps:记得在app.module.ts 加上providers: [KmyService]

import{Injectable } from '@angular/core';@Injectable()export class KmyService { i:number = 0;}

结果：

6.EventEmitter

myService.ts

import {Component,Injectable,EventEmitter} from '@angular/core';@Injectable()export class myService { change: EventEmitter<number>; constructor(){ this.change = new EventEmitter(); }}

parent.ts

import { Component } from '@angular/core';import{myService}from '../child/myService'@Component({ selector: 'page-parent', templateUrl: 'parent.html',})export class ParentPage { i:number = 0; constructor(service:myService) { setInterval(()=> { service.change.emit(++this.i); }, 1000) }}

parent.html

<ion-header> <ion-navbar> <ion-title>Parent</ion-title> </ion-navbar></ion-header><ion-content padding> <h1>parent {{i}}</h1> <page-child></page-child></ion-content>

child.ts

import { Component, EventEmitter} from '@angular/core';import{myService}from "../child/myService"@Component({ selector: 'page-child', templateUrl: 'child.html',})export class ChildPage { i:number = 0; constructor(public service:myService){ service.change.subscribe((value:number)=>{ this.i = value; }) } }

child.html

<ion-content padding> <h2>child {{i}}</h2></ion-content>

结果：

7.订阅

parent.ts

import { Component } from '@angular/core';import{myService}from '../child/myService'@Component({ selector: 'page-parent', templateUrl: 'parent.html',})export class ParentPage { i:number=0; constructor(public service:myService) { setInterval(()=> { this.service.StatusMission(this.i++); }, 1000) }}

parent.html

<ion-header> <ion-navbar> <ion-title>Parent</ion-title> </ion-navbar></ion-header><ion-content padding> <h1>parent</h1> <page-child></page-child></ion-content>

child.ts

import { Component, Injectable } from '@angular/core'import { myService } from "../child/myService"import { Subscription } from 'rxjs/Subscription';@Component({ selector: 'page-child', templateUrl: 'child.html',})export class ChildPage { i:number=0; subscription: Subscription; constructor(private Service: myService) { this.subscription = Service.Status$.subscribe(message => { this.i=message; }); } ngOnDestroy() { this.subscription.unsubscribe(); }}

child.html

<ion-content padding> <h2>child {{i}}</h2> </ion-content>

myService.ts

import { Injectable } from '@angular/core';import { Subject } from 'rxjs/Subject';@Injectable()export class myService { private Source=new Subject<any>(); Status$=this.Source.asObservable(); StatusMission(message: any) { this.Source.next(message); }}

结果：

以上七种组件与组件的通讯方式，可以选择应用于适合的场景里面，根据情况吧。希望对大家的学习有所帮助，也希望大家多多支持。