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

更新时间：2020-07-16 05:54:01 作者：startmvc

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

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

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

结果：