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 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
vue实现折线图 可按时间查询
Aug 21 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学习之function的用法
2012/07/14 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
jquery 插件学习(二)
2012/08/06 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python机器学习之神经网络(三)
2017/12/20 Python
python编写分类决策树的代码
2017/12/21 Python
python实现列表的排序方法分享
2019/07/01 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python能做哪方面的工作
2020/06/15 Python
.NET常见笔试题集
2012/12/01 面试题
外语专业毕业生自我评价分享
2013/10/05 职场文书
自我鉴定三原则
2014/01/13 职场文书
科研先进个人典型材料
2014/01/31 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
团员个人总结
2015/02/26 职场文书
保险公司增员口号
2015/12/25 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Python初学者必备的文件读写指南
2021/06/23 Python