Angular4 组件通讯方法大全(推荐)
更新时间：2018年07月12日 15:17:09 作者：huangenai
这篇文章主要介绍了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
<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);
}
}
结果：
以上七种组件与组件的通讯方式，可以选择应用于适合的场景里面，根据情况吧。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
AngularJS基础 ng-mousemove 指令简单示例
本文主要介绍AngularJS ng-mousemove 指令,这里帮大家整理了ng-mousemove 指令的详细资料,并附有示例代码,有需要的朋友参考下2016-08-08
由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能，下面小编把实例demo分享到脚本之家平台，需要的朋友参考下2017-09-09
本篇文章主要介绍了Angular如何引入第三方库的方法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Angular脚手架开发的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了基于angular2 的 http服务封装实例代码，2017-06-06
使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了Webpack 实现 AngularJS 的延迟加载的相关资料,需要的朋友可以参考下2016-03-03
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
这篇文章主要介绍了AngularJs的UI组件ui-Bootstrap之Tooltip和Popover，tooltip和popover是轻量的、可扩展的、用于提示的指令。具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了angular2模块和共享模块详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
详解AngularJs中$sce与$sceDelegate上下文转义服务
这篇文章给大家详细介绍了AngularJs提供的严格上下文转义服务$sce与$sceDelegate，文中介绍的很详细，有需要的朋友们可以参考借鉴。2016-09-09
最新评论