angularjs组件间通讯_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

Parent

Parent

child.ts

import { Component,Input } from '@angular/core';

@Component({

selector: 'page-child',

templateUrl: 'child.html',

})

export class ChildPage {

@Input() content:string;

constructor() {

}

}

child.html

child:{{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

Parent

Parent:{{i}}

child.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({

selector: 'page-child',

templateUrl: 'child.html',

})

export class ChildPage {

@Output() changeNumber: EventEmitter = new EventEmitter();

Number: number = 0;

constructor() {

setInterval(() => {

this.changeNumber.emit(++this.Number);

}, 1000)

}

}

child.html

child

结果：

3.子获得父实例

parent.ts

import { Component } from '@angular/core';

@Component({

selector: 'page-parent',

templateUrl: 'parent.html',

})

export class ParentPage {

i:number = 0;

}

parent.html

Parent

parent: {{i}}

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

child

结果：

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

Parent

parent {{i}}

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

child {{i}}

结果：

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

Parent

parent {{i}}

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

child {{service.i}}

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;

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

Parent

parent {{i}}

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

child {{i}}

结果：

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

Parent

parent

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

child {{i}}

myService.ts

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);

}

}

结果：

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