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

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

结果:

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>

结果:

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>

结果:

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>

结果:

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 = ;
}

结果:

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>

结果:

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 组件通讯方法大全的更多相关文章

  1. [转载]Angular4 组件通讯方法大全

    组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...

  2. vue组件通讯方法汇总(在不使用vuex的情况下)

    前三种是父子组件通讯,最后一种是平级组件.

  3. angular4 组件通讯、生命周期

    主要通讯形式 父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件 父组件通过局部变量获取子组件的引用 父组件使用@ViewChild获取子组件的引用 两个不相关联的组件使用中间人模式交互 终极 ...

  4. Omi教程-组件通讯攻略大全

    组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设 ...

  5. Omi教程-组件通讯

    组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 父容器设置 childrenData ...

  6. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  7. ng组件通讯的几种方式

    通过输入型绑定把数据从父组件传到子组件. 如<app-hero-child *ngFor="let hero of heroes"  [hero]="hero&qu ...

  8. Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

    组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...

  9. angular2组件通讯的几种方式

    最近刚刚接触angular2,对ng2也是一知半解,如有说得不对的地方欢迎指出,欢迎加q共同探讨学习991085978: 1.通过输入型绑定把数据从父组件传到子组件 HeroChildComponen ...

随机推荐

  1. 微软SQL Server认证最新信息(17年5月22日更新),感兴趣的进来看看哟

    之前一直有在关注微软认证的一些消息,由于最新的SQL Server认证加入了2016的相关内容,导致课程资料需要大部分更新,但是微软更新相对比较慢,并且经常改版,目前发现的最新的MCP Cert Pa ...

  2. JS问题笔记——模拟Jq底层实现工厂模式

    <script type="text/javascript"> (function (window,undefined){ function _$(arguments) ...

  3. Java程序设计环境概述

    本文主要Java程序设计环境的要点,以及相关注意事项. 一.安装Java开发包 Oracle公司为Linux.Mac OS X.Solaris和Windows提供了Java开发工具包(JDK)的最新. ...

  4. webpack实用配置

    前面的话 上文介绍了webpack入门,本文将详细介绍webpack实用配置 版本号 以entry.js打包为bundle.js为例,出口的filename可以设置为[id].[name].[hash ...

  5. 关于ArcGIS Android的在x86和x64系统中兼容性的问题与解决方案

    我们都知道,在配置ArcGIS Android SDK时,需要在jniLibs目录下放置三个文件夹,分别是armeabi.armeabi-v7a.x86三个文件夹,ArcGIS Android针对目标 ...

  6. PHP中几个输出函数echo,print(),print_r(),sprintf(),var_dump()的区别

    1:echo:是语句不是函数,没有返回值,可输出多个变量值,不需要圆括号.不能输出数组和对象,只能打印简单类型(如int,string). 2:print:是语句不是函数,有返回值 1 ,只能输出一个 ...

  7. 进程cookie与硬盘cookie

    内存cookie,是指没有设在cookie的Expires(过期时间)的属性硬盘cookie,是指在你设置了cookie的Expires(过期时间)属性 关于session的几点理解与测试 同一个浏览 ...

  8. java怎么处理json数据

    json = new JSONObject(data); int which = json.optInt("which", -1); String label = json.opt ...

  9. C++函数重载实现的原理以及为什么在C++中使用用C语言编译的函数时,要在函数名称前面加上extern "C"声明

    C++相对于C语言而言支持函数重载是其极大的一个特点,相信在使用C语言的时候大家如果要写一个实现两个整型数据相加的函数还要写一个浮点型数据相加的函数,那么这两个函数的名字绝对不可以一样,这样无疑在我们 ...

  10. 想从事IT行业的你,一定看看这篇文章

    很多想从事IT行业的小伙伴都会问: 我该如何学习技术? 我应该选择什么样的方向来深入学习并以此来就业? 如何证明自己的技术很牛? 什么是程序员的核心竞争力? 如何成为一名优秀的工程师? 对于这些疑问, ...