Angular4 组件通讯方法大全(推荐)

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

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

结果：

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