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

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

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

1.父子投入

家长。分时（同timesharing）

从“@棱角分明/核心”导入{组件}；@ Component({选择器： ' page-parent '，模板Url: 'parent.html '，})导出类父页面{ I :编号=0；构造函数(){ setInterval(()={ this。我；}，1000) }}parent.html

ion-header ion-导航栏ion-title ParT/ion-title/ion-导航栏/ion-header ion-内容填充H2 ParT/H2 page-child[content]=' I '/page-child/ion-content child。分时（同timesharing）

从“@棱角分明/核心”导入{组件，输入}；@ Component({选择器： ' page-child '，模板URLs : ' child。html '，})导出类子页面{ @ Input()内容：字符串；constructor() { }}child.html

离子含量填充子级： { { content } }/离子含量结果：

2.子父输出

家长。分时（同timesharing）

从“@棱角分明/核心”导入{组件}；@ Component({选择器： ' page-parent '，模板Url: 'parent.html '，})导出类父页面{ I :编号=0；numberIChange(我的号码是：){这个。我=我；}}parent.html

离子-标题离子-导航条离子-标题母/离子-标题/离子-导航条/离子-标题离子-内容填充H2家长： { { I } }/H2页面-孩子(更改号码)=' numberIChange($ event)'/页面-孩子/离子-内容孩子。分时（同timesharing）

从“@棱角分明/核心”导入{组件、事件发射器、输出}；@ Component({选择器： ' page-child '，模板URLs : ' child。html '，})导出类子页面{ @ Output()} changenough :事件emitername=new事件发射器()；数字：数字=0；构造函数(){ SetInterval(()={ this。更改号码。发出(这个.数量);}，1000) }}child.html

离子内容填充子/离子内容结果：

3.子获得父实例

家长。分时（同timesharing）

从“@棱角分明/核心”导入{组件}；@ Component({选择器： ' page-parent '，模板Url: 'parent.html '，})导出类父页面{ I :编号=0；}parent.html

离子-标题离子-导航条离子-标题母/离子-标题/离子-导航条/离子-标题离子-内容填充h1父级： { { I } }/h1页面-子级/页面-子级/离子-内容子级。分时（同timesharing）

从“@棱角分明/核心”导入{组件、输入、事件发射器、输出、主机、注入、转发参考}；从""导入{ParentPage}./parent/parent '；@ Component({选择器： ' page-child '，模板Url: 'child.html '，})导出类ChildPage {构造函数(@ Host()@ Inject(forward ref(()=父页))app :父页){ setInterval(()={ app。我；}, 1000);}}child.html

离子内容填充子/离子内容结果：

4.父获得子实例

家长。分时（同timesharing）

从“@棱角分明/核心”导入{视图子级，组件}；从导入{ ChildPage }./child/child '；@ Component({选择器： ' page-parent '，模板Url: 'parent.html '，})导出类父页面{ @ view child(子页面)child :子页面；ngAfterViewInit(){ setInterval(()={ this。孩子。我；}，1000) }}parent.html

ion-header ion-导航栏ion-title ParT/ion-title/ion-导航栏/ion-header ion-内容填充h1 ParT { { I } }/h1 page-child/page-child/ion-content child。分时（同timesharing）

从“@棱角分明/核心”导入{组件、输入、事件发射器、输出、主机、注入、转发参考}；@ Component({选择器： ' page-child '，模板Url: 'child.html '，})导出类子页面{ I :个数=0；}child.html

离子含量划片H2儿童{ { I } }/H2/离子含量结果：

5 .服务

家长。分时（同timesharing）

从“@棱角分明/核心”导入{组件}；从""导入{我的服务}./child/my service ' @ Component({选择器： ' page-parent '，模板Url: 'parent.html '，})导出类父页面{ I :编号=0；构造函数(service : my service){ setInterval(()={ service。我；}，1000) }}parent.html

ion-header ion-导航栏ion-title ParT/ion-title/ion-导航栏/ion-header ion-内容填充h1 ParT { { I } }/h1 page-child/page-child/ion-content child。分时（同timesharing）

从“@棱角分明/核心”导入{组件}；从""导入{我的服务}./child/my service ' @ Component({选择器： ' page-child '，模板Url: 'child.html '，})导出类ChildPage {构造函数(公共服务：我的服务){ } }孩子。超文本标记语言

离子内容填充H2儿童{ { service。我} }/H2/离子-满足我的服务。分时（同timesharing）

ps:记得在app.module.ts加上providers: [KmyService]

从“@棱角分明/核心”导入{内射}；@可注射()导出类KmyService { I : number=0；}结果：

6.事件发射器

myService.ts

从“@棱角分明/核心”导入{组件、可注射、事件发射器}；@可注射()导出类我的服务{ change :事件emitternumberconstructor(){ this。change=new事件发射器()；}}parent.ts

从“@棱角分明/核心”导入{组件}；从""导入{我的服务}./child/my service ' @ Component({选择器： ' page-parent '，模板Url: 'parent.html '，})导出类父页面{ I :编号=0；构造函数(service : my service){ setInterval(()={ service。改变。发射(这个。(一)；}，1000) }}parent.html

ion-header ion-导航栏ion-title ParT/ion-title/ion-导航栏/ion-header ion-内容填充h1 ParT { { I } }/h1 page-child/page-child/ion-content child。分时（同timesharing）

从“@棱角分明/核心”导入{组件，事件发射器}；从""导入{我的服务}./child/my service ' @ Component({选择器： ' page-child '，模板Url: 'child.html '，})导出类子页面{ I :个数=0；构造函数(公共服务：我的服务){服务。改变。subscribe((value : number)={ this。I=值；}) } }child.html

离子含量填充H2儿童{ { I } }/H2/离子含量结果：

7.订阅

家长。分时（同timesharing）

从“@棱角分明/核心”导入{组件}；从""导入{我的服务}./child/my service ' @ Component({选择器： ' page-parent '，模板Url: 'parent.html '，})导出类父页面{ I :编号=0；构造函数(公共服务：我的服务){ setInterval(()={ this。服务。地位使命(这。(一)；}，1000) }}parent.html

离子-标题离子-导航条离子-标题母/离子-标题/离子-导航条/离子-标题离子-内容填充h1父/h1页面-子/页面-子/离子-内容子。分时（同timesharing）

从“@棱角分明/核心”导入{可注射成分}从""导入{我的服务}./child/myService从" rxjs/订阅"导入{订阅}；@ Component({选择器： ' page-child '，模板Url: 'child.html '，})导出类子页面{ I :个数=0；订阅：订阅；构造函数（私有服务：我的服务){这个。订阅=服务.状态$。订阅(message={ this . I=message })；} NGondestroy(){ this。订阅。unsubscribe()；}}child.html

离子内容填充H2儿童{ { I } }/H2/ion-ContentMyServiCe。分时（同timesharing）

从“@棱角分明/核心”导入{内射}；从"接收/主题"导入{主题}；@可注射()导出类我的服务{ private Source=new Subjectany()；状态$=这个来源。as observable()；StatusMission(消息：任何){这个.Source.next(消息);}}结果：

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