Angular4 组件通讯方法大全

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

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

1.父→子 input

parent.ts

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

@Component({
selector: 'page-parent',
templateUrl: 'parent.html',
})
export class ParentPage {
i: number = ;
constructor() {
setInterval(() => {
this.i++;
}, )
}
}
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>

结果:

Angular4 组件通讯方法大全

2.子→父 output

parent.ts

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

@Component({
selector: 'page-parent',
templateUrl: 'parent.html',
})
export class ParentPage {
i: number = ;
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 = ;
constructor() {
setInterval(() => {
this.changeNumber.emit(++this.Number);
}, )
}
}
child.html

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

结果:

Angular4 组件通讯方法大全

3.子获得父实例

parent.ts

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

@Component({
selector: 'page-parent',
templateUrl: 'parent.html',
})
export class ParentPage {
i:number = ;
}
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++;
}, );
}
}
child.html

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

结果:

Angular4 组件通讯方法大全

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++;
}, )
}
}
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 = ;
}
child.html

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

结果:

Angular4 组件通讯方法大全

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++;
}, )
}
}
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 = ;
}

结果:

Angular4 组件通讯方法大全

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 = ;
constructor(service:myService) {
setInterval(()=> {
service.change.emit(++this.i);
}, )
}
}
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 = ; constructor(public service:myService){
service.change.subscribe((value:number)=>{
this.i = value;
})
} }
child.html

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

结果:

Angular4 组件通讯方法大全

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=;
constructor(public service:myService) {
setInterval(()=> {
this.service.StatusMission(this.i++);
}, )
}
}
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=;
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);
}
}

结果:

Angular4 组件通讯方法大全

以上七种组件与组件的通讯方式,可以选择应用于适合的场景里面,根据情况吧。

此随笔乃本人原创,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。

上一篇:java_reflect_04


下一篇:APSC4xSeries_Ver32.exe在win764位提示缺少DLL错误解决办法