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.tsps:记得在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);}
}

结果：

以上七种组件与组件的通讯方式，可以选择应用于适合的场景里面，根据情况吧。

此随笔乃本人原创，如有疑问欢迎在下面评论，转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

转载于:https://www.cnblogs.com/huangenai/p/7246651.html

Angular4 组件通讯方法大全相关推荐

Vue3 10多种组件通讯方法
本文简介点赞 + 关注 + 收藏 = 学会了本文讲解 Vue 3.2 组件多种通讯方式的基础用法,并且使用了单文件组件 <script setup> . 众所周知,Vue.js 中一 ...
Vue3/ Vue3 组件通讯 -- 子传父方法流程总结
一 .Vue3 组件通讯 -- 子传父方法流程 1. 首先子组件通过 defineEmit 写入传递事件名并定义变量名 const 变量名one = defineEmit([' 传递事件名']) ...
Omi教程-组件通讯攻略大全
组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设 ...
vue组件通讯六种方法。
props $emit v-model 实现一层子级父级传递. $children $parent 返回的是一个组件集合,但是需要手动添加下标,不推荐使用(组件一但很多,不利于维护). eventBu ...
IT 巡检内容、方法大全
IT 巡检内容.方法大全目录 1. 概述 2. 巡检维度 3. 巡检内容 4. 巡检方法 5. 常用命令.常见问题和解决方法 6. 附录 1 词汇表 7. 附录 2 参考资料 1. ...
【VUE3】保姆级基础讲解（二）计算属性，vue组件，vue-cli脚手架，组件通讯，插槽slot
目录计算属性computed 侦听器watch 对象监听组件注册全局组件注册局部组件 Vue-CLI脚手架安装和使用 .browserslistrc main.js jsconfig.jso ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
Omi框架学习之旅 - 通过对象实例来实现组件通讯及原理说明
组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...
一起学React--组件定义和组件通讯
React主打函数式编程,配合上JSX语法,基本上可以把每个模块都封装为单独组件,用组件一时爽,一直用一直爽. 1.函数式组件在React中最简单的即是创建一个函数式,没有生命周期的组件,这与 Vu ...

Angular4 组件通讯方法大全

1.父→子 input

2.子→父 output

3.子获得父实例

4.父获得子实例

5.service

6.EventEmitter

7.订阅

Angular4 组件通讯方法大全相关推荐

最新文章

热门文章