我要评论组件通讯，意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。
最近在项目上，组件跟组件之间可能是父子关系，兄弟关系，爷孙关系都有。。。。。我也找找了很多关于组件之间通讯的方法，不同的方法应用在不同的场景，根据功能需求选择组件之间最适合的通讯方式。下面我就总结一下关于组件通讯的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);
}
}
结果：
以上七种组件与组件的通讯方式，可以选择应用于适合的场景里面，根据情况吧。希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论