组件化是angular的核心概念，所以组件通信的使用就比较多而且很重要。
官方传送门：
https://angular.io/guide/component-interaction 
https://angular.cn/guide/component-interaction
相关教程推荐：《angular教程》
父子组件通信关键词    input    output    eventemitter    viewchild
1、父组件 向 子组件 传递数据【input】
绑定属性的方式
父组件：
<!-- parentcomponent --><app-child [name]="'childname'"></app-child>
子组件：
// 子组件需要使用input接收
<span>{{name}}</span>
@input() public name:string = '';
2、子组件 向 父组件 传递数据【output eventemitter】
子组件：
@output()public readonly childemit: eventemitter<t> = new eventemitter<t>();this.childemit.emit(data);
父组件：
<app-child (childemit)="getdata($event)"></app-child>
public getdata(data:t): void { }
3、viewchild 方法因为我觉得这个方法既可以让父组件获取子组件的数据，又可以让父组件给子组件设置变量值等，所以我这里单独分了出来。
父组件：
<app-child **#child**></app-child><button (click)="**child**.print('---')">点击</button>
@viewchild('child', { static: true })public child!: elementref<htmlelement>;public print():void{ if(this.child){ // 这里得到child，可以使用child中的所有的public属性方法 this.child.print('hello2'); }}
【示例】
// 父组件import { component } from '@angular/core';@component({ selector: 'app-parent', template: ` <app-child #child [name]="name" (childemit)="childclick($event)"></app-child> <button (click)="child.print('hello1')">调用子组件的方法1</button> <button (click)="print()">调用子组件的方法2</button> `})export class parentcomponent { public name:string = '大儿子'; @viewchild('child', { static: true }) public child!: elementref<htmlelement>; public childclick(bool:boolean):void{ // todo } public print():void{ if(this.child){ this.child.print('hello2'); } }}/*****************************************************/// 子组件import { component, input, output, eventemitter } from '@angular/core';@component({ selector: 'app-child', template: ` <h3 (click)="myclick()">{{name}}</h3> `})export class herochildcomponent { @input() public name: string; @output() public readonly childemit: eventemitter<boolean> = new eventemitter<boolean>(); public myclick():void{ this.childemit.emit(true); } public print(content:string):void{ console.log(content); }}
非父子组件通信1、service单例模式，其实就是一个变量，需要双向触发（发送信息 / 接收信息），及设置和获取数据都需要组件自己去处理。
service.ts
import { component, injectable, eventemitter } from '@angular/core';@injectable()export class myservice { public info: string = '';}
组件 1 向 service 传递信息
import { service1 } from '../../service/service1.service';...public constructor( public service: service1,) { }public changeinfo():void { this.service.info = this.service.info + '1234';}...
组件 2 从 service 获取信息
import { service2 } from '../../service/service2.service';...public constructor( public service: service2,) { }public showinfo() { console.log(this.service.info);}...
2、subject（发布订阅）真正的发布订阅模式，当数据改变时，订阅者也能得到响应,这里只举了behaviorsubject的例子
// serviceimport { behaviorsubject } from 'rxjs';...public messagesource = new behaviorsubject<string>('start');public changemessage(message: string): void { this.messagesource.next(message);}public getmessagesource(): observable<string> { return this.messagesource.asobservable();}/////////////////////////// 发布...this.messageservice.changemessage('message change');/////////////////////////public // 订阅 (记得根据需要选择是否取消订阅 unsubscribe)this.messageservice.getmessagesource().subscribe(m => { console.log(m);})
四种主题subject对比rxjs subject是否存储数据是否需要初始值何时向订阅者发布数据
subject 否 否 及时发布。有新数据就发布
behaviorsubject 是。存储最后一条数据或者初始值 是 及时发布。有新数据就发布
replaysubject 是。存储所有数据 否 及时发布。有新数据就发布
asyncsubject 是。存储最后一条数据 是 延时发布。只有当数据源complete的时候才会发布
其他通信方式路由传值、浏览器本地存储（localstorage，sessionstorage）、cookie。
更多编程相关知识，可访问：编程入门！！
以上就是5种angular中组件通信的方法介绍的详细内容。