Angular4 组件通讯方法大全(推荐)


Posted in Javascript onJuly 12, 2018

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

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

结果:

Angular4 组件通讯方法大全(推荐)

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>

结果:

Angular4 组件通讯方法大全(推荐)

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>

结果:

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

结果:

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

结果:

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

结果:

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

结果:

Angular4 组件通讯方法大全(推荐)

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

Javascript 相关文章推荐
javascript中简单的进制转换代码实例
Oct 26 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
比较node.js和Deno
Apr 27 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 #Javascript
详解node.js的http模块实例演示
Jul 12 #Javascript
Vue中使用的EventBus有生命周期
Jul 12 #Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 #Javascript
vue实现引入本地json的方法分析
Jul 12 #Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
JS实现将二维数组转为json格式字符串操作示例
Jul 12 #Javascript
You might like
php开发环境配置记录
2011/01/14 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
YII实现分页的方法
2014/07/09 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
简单介绍Python中的JSON使用
2015/04/28 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python3获取当前目录的实现方法
2019/07/29 Python
python生成随机红包的实例写法
2019/09/02 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
2014小学一年级班主任工作总结
2014/12/05 职场文书
交通事故调解协议书
2015/05/20 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书