单页面应用组件通信有以下几种，这篇文章主要讲有角的通信

父组件=子组件子组件=父组件组件A=组件B父组件=子组件子组件=父组件兄弟=兄弟@输入@输出设置器（本质上还是@input)注入父组件ngOnChanges()(不推荐使用)局部变量@ViewChild()服务服务Rxjs的Observalbe Rxjs的Observalbe Rxjs的Observalbe localStorage，sessionStorage localStorage，sessionStorage，sessionStorage上面图表总结了能用到通信方案，期中最后3种，是通用的有角度的的组件之间都可以使用这3种，其中Rxjs是最最牛逼的用法，甩redux，保证，这些同样基于函数式的状态管理几条街，下面一一说来

父组件=子组件

@输入，最常用的一种方式

@ Component({选择器： ' app-parent '，模板： ' div childtext : app-child[text content]=' VarString '/app-child/div '，style URL 3360[)./parent.component.css']})导出类父组件实现OnInit { varString:字符串；constructor(){ } ngOnInit(){ this。varstring='从父组件传过来的；} }从“@棱角分明/核心”导入{组件，OnInit，Input }；@ Component({选择器： ' app-child '，模板： ' h1 { { textContent } }/h1 '，style URL 3360[)./child.component.css']})导出类ChildComponent实现OnInit { @Input()公共文本内容：字符串；constructor(){ } ngOnInit(){ } } setter

作曲者是拦截@输入属性，因为我们在组件通信的时候，常常需要对输入的属性处理下，就需要作曲者了，setter和吸气剂常配套使用，稍微修改下上面的child.component.ts

child.component.ts

从“@棱角分明/核心”导入{组件，OnInit，Input }；@ Component({选择器： ' app-child '，模板： ' h1 { { textContent } }/h1 '，style URL 3360[)./child.component.css']})导出类ChildComponent实现在init { _ textcontents :字符串上；@Input()设置文本内容(文本：字符串){这个._textContent=！文本： '啥都没有给我？文本；} ;获取文本内容(){ 0返回此_ textContent}构造函数(){ } ngOnInit(){ } } onChange

这个是通过有角的生命周期钩子来检测，不推荐使用，要使用的话可以参有角的文档

@ViewChild()

@ViewChild()一般用在调用子组件非私有的方法

从“@棱角分明/核心”导入{组件，OnInit，视图子级}；从""导入{ ViewChildChildComponent }./view-child-child/view-child-child组件'；@ Component({选择器： ' app-parent '，templateUrl: ' ./parent.component.html '，style URL 3360[]./parent.component.css'] })导出类父组件实现OnInit { varString:字符串；@ ViewChildChildComponent(ViewChildChildComponent)ViewChildChildComponent :constructor(){ } ngOnInit(){ this。varstring='从父组件传过来的；}点击事件（点击事件：任意){ console.log(点击事件);这个。viewchildchildcomponent。我的名字(clickevent。值)；} }从“@棱角分明/核心”导入{组件，在初始化时}；@ Component({选择器： ' app-view-child-child '，templateUrl: ' ./view-child-child。组件。html '，style URL 3360[./view-child-child。组件。CSS ']})导出类ViewChildChildComponent实现在init { constructor(){ } name :上字符串；我的名字(名称：字符串){ console.log(名称);this.name=name} ngOnInit() { } }局部变量

局部变量和viewChild类似，只能用在超文本标记语言模板里，修改parent.component.html，通过#viewChild这个变量来表示子组件，就能调用子组件的方法了。

div class=' panel-body ' input class=' form-control ' type=' text ' # viewChildInputName button class=' BTN BTN-primary '(单击)=' viewChildInputName。myname(viewChildInputName。值)'局部变量传值/button app-view-child-child # view child/app-view-child-child/div child组件如下

@ Component({选择器： ' app-view-child-child '，templateUrl: ' ./view-child-child。组件。html '，style URL 3360[./view-child-child。组件。CSS ']})导出类ViewChildChildComponent实现在init { constructor(){ } name :上字符串；我的名字(名称：字符串){ console.log(名称);this.name=name} ngOnInit() { }}子组件=父组件

@output()

输出这种常见的通信，本质是给子组件传入一个功能，在子组件里执行完某些方法后，再执行传入的这个回调功能，将值传给父组件

parent.component.ts

@ Component({ selector : ' app-child-to-parent '，templateUrl: ' ./parent.component.html '，style URL 3360[]./parent.component.css']})导出类ChildToParentComponent实现OnInit {儿童名称：字符串；项目：的子名称字符串；constructor(){ } ngOnInit(){ } showChildName(name : string){ this。childname=name}}parent.component.html

div class='panel-body' poutput方式child text : { { child name } }/p br app-output-child(childName vent emitter)=' showChildName($ event)'/app-output-child/div child。组件。分时（同timesharing）导出类OutputChildComponent实现OnInit { //传入的回调事件@ Output()public childnameventemiter : event emiterny=new event emitter()；constructor(){ } ngOnInit(){ } showMyName(值){ //这里就执行，父组件传入的函数这个。childnameventemitter。发出(值);}}注入父组件

这个原理的原因是父，子组件本质生命周期是一样的

导出类OutputChildComponent实现OnInit { //注入父组件构造函数(private ChildToParentComponent : ChildToParentComponent){ } ngOnInit(){ } showMyName(值){ this。ChildToParentComponent。对象的子名称=值；} }兄弟姐妹组件=兄弟姐妹组件

服务

Rxjs

通过服务通信

有角的中服务是单例的，所以三种通信类型都可以通过服务，很多前端对单例理解的不是很清楚，本质就是，你在某个组件中注入服务，所有这个模块的成分都可以拿到这个服务的属性，方法，是共享的，所以常在app.moudule.ts注入日志服务，http拦截服务，在子组件注入的服务，只能这个子组件能共享，在成分注入的服务，就只能子的成分的能拿到服务，下面以注入到app.module.ts，的服务来演示

user.service.ts

@可注射()导出类UserService { age:号码用户名：字符串；constructor() { }}app.module.ts

@ ng模块({声明：[AppComponent，SiblingAComponent，SiblingAComponent，imports: [ BrowserModule ]，providers: [UserService]，bootstrap: [AppComponent])导出类AppModule { } SiblingAComponent。ts @ Component({选择器： ' app-sibling-b '，templateUrl: ' ./sibling-b.component.html '，style URL 3360[./sible-b.component . CSS ']})导出类siblingb组件实现OnInit {构造函数(私人用户服务：用户服务){这。UserServiCe。用户名='王二；} ngOnInit(){ } } Siblingacomponent。分时（同timesharing）

@ Component({ selector : ' app-size-a '，templateUrl: ' ./sibling-a.component.html '，style URL 3360[./sible-a.component . CSS ']})导出类SiblingAComponent实现OnInit {用户名：字符串；构造函数（私有用户服务：用户服务){ } ngOnInit(){ this。用户名=这个。用户服务。用户名；}}通过Rx.js通信

这个是最牛逼的，基于订阅发布的这种流文件处理，一旦订阅，发布的源头发生改变，订阅者就能拿到这个变化；这样说不是很好理解，简单解释就是，b.js，c.js，d.js订阅了a.js里某个值变化，b.js，c.js，d.js立马获取到这个变化的，但是a.js并没有主动调用b.js，c.js，d.js这些里面的方法，举个简单的例子，每个页面在处理创建交互式、快速动态网页应用的网页开发技术请求的时候，都有一弹出的提示信息，一般我会在组件的模板中中放一个提示框的组件，这样很繁琐每个组件都要来一次，如果基于Rx.js，就可以在app.component.ts中放这个提示组件，然后app.component.ts订阅公共的服务，就比较省事了，代码如下

首先搞一个alset.service.ts

从“@棱角分明/核心”导入{内射}；从"接收/主题"导入{主题}；@可注射()导出类警报服务{私有messageSu=new Subjectstring()；//messageObserve=this。消息。as observable()；私有设置消息(消息：字符串){ this.messageSu.next(消息);}公开成功(消息：字符串，回调？函数){ this.setMessage(消息);回调();} }兄弟-a .组件. ts

@ Component({ selector : ' app-size-a '，templateUrl: ' ./sibling-a.component.html '，style URL 3360[./sible-a.component . CSS ']})导出类SiblingAComponent实现OnInit {用户名：字符串；构造函数（私有用户服务：用户服务，私有alert service : alert service){ } ngOnInit(){ this。用户名=这个。用户服务。用户名；//改变警报服务的信息源this.alertService.success('初始化成功');}}app.component.ts

@ Component({选择器： ' app-root '，模板Url: ' ./app.component.html '，style URL 3360[]./app.component.css']})导出类AppComponent { title=' appmessage :字符串；构造函数（私有警报服务：警报服务){//订阅alertServcie的消息服务这个。alertservice。消息观察。订阅((RES : any)={ this。消息=RES});}}这样订阅者就能动态的跟着发布源变化

总结： 以上就是常用的的通信方式，各种场景可以采取不同的方法。希望对大家的学习有所帮助，也希望大家多多支持我们。