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 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
Vue中的组件及路由使用实例代码详解
May 22 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
一个php导出oracle库的php代码
2009/04/20 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python实现的特征提取操作示例
2018/12/03 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
存储过程和函数的区别
2013/05/28 面试题
应届生会计求职信
2013/11/11 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
假面舞会策划方案
2014/05/29 职场文书
优秀会计求职信
2014/07/04 职场文书
课外小组活动总结
2014/08/27 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
党员转正介绍人意见
2015/06/03 职场文书