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

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

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

1.父→子 input

parent.ts

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

parent.html

rush:xhtml;"> Parent

Parent

child.ts

rush:js;"> import { Component,Input } from '@angular/core';

@Component({
selector: 'page-child',templateUrl: 'child.html',})
export class ChildPage {
@input() content:string;
constructor() {
}
}

child.html

rush:xhtml;"> child:{{content}}

结果:

2.子→父 output

parent.ts

rush:js;"> import { Component } from '@angular/core';

@Component({
selector: 'page-parent',})
export class ParentPage {
i: number = 0;

numberIChange(i:number){
this.i = i;
}
}

parent.html

rush:xhtml;"> Parent

Parent:{{i}}

child.ts

rush:js;"> import { Component,EventEmitter,Output } from '@angular/core';

@Component({
selector: 'page-child',})

export class ChildPage {
@Output() changeNumber: EventEmitter = new EventEmitter();
Number: number = 0;
constructor() {
setInterval(() => {
this.changeNumber.emit(++this.Number);
},1000)
}
}

child.html

rush:xhtml;"> child

结果：

3.子获得父实例

parent.ts

rush:js;"> import { Component } from '@angular/core';

@Component({
selector: 'page-parent',})
export class ParentPage {
i:number = 0;
}

parent.html

rush:xhtml;"> Parent

parent: {{i}}

child.ts

ParentPage)) app: ParentPage) { setInterval(() => { app.i++; },1000); } }

child.html

rush:xhtml;"> child

结果：

4.父获得子实例

parent.ts

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

parent.html

rush:xhtml;"> Parent

parent {{i}}

child.ts

rush:js;"> import { Component,forwardRef } from '@angular/core';

@Component({
selector: 'page-child',})
export class ChildPage {
i:number = 0;
}

child.html

rush:xhtml;">

child {{i}}

结果：

5.service

parent.ts

@Component({
selector: 'page-parent',})
export class ParentPage {

i:number=0;

constructor(service:myService) {
setInterval(()=> {
service.i++;
},1000)
}
}

parent.html

rush:xhtml;"> Parent

parent {{i}}

child.ts

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

child.html

rush:xhtml;">

child {{service.i}}

myService.ts

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

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

结果：

6.EventEmitter

myService.ts

rush:js;"> import {Component,Injectable,EventEmitter} from '@angular/core'; @Injectable() export class myService { change: EventEmitter;

constructor(){
this.change = new EventEmitter();
}
}

parent.ts

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

parent.html

rush:xhtml;"> Parent

parent {{i}}

child.ts

import{myService}from "../child/myService"
@Component({
selector: 'page-child',})
export class ChildPage {

i:number = 0;

constructor(public service:myService){
service.change.subscribe((value:number)=>{
this.i = value;
})
}

}

child.html

rush:xhtml;">

child {{i}}

结果：

7.订阅

parent.ts

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

parent.html

rush:xhtml;"> Parent

parent

child.ts

{ this.i=message; }); }

ngOnDestroy() {
this.subscription.unsubscribe();
}
}

child.html

rush:xhtml;">

child {{i}}

myService.ts

rush:js;"> import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject';

@Injectable()
export class myService {

private Source=new Subject();
Status$=this.source.asObservable();
StatusMission(message: any) {
this.source.next(message);
}
}

结果：

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

原文地址：https://www.jb51.cc/js/31533.html