组件化是Angular的核心概念，所以组件通信的使用就比较多而且很重要。
官方传送门：https://angular.io/guide/component-interaction https://angular.cn/guide/component-interaction相关教程推荐：《angular教程》
父子组件通信
关键词 Input Output EventEmitter ViewChild
1、父组件 向 子组件 传递数据
【Input】
绑定属性的方式
父组件：
登录后复制
子组件：
// 子组件需要使用Input接收
{{name}}
登录后复制
@Input() public name:string = '';
登录后复制
2、子组件 向 父组件 传递数据
【Output EventEmitter】
子组件：
@Output()public readonly childEmit: EventEmitter = new EventEmitter();this.childEmit.emit(data);
登录后复制
父组件：
登录后复制
public getData(data:T): void { }
登录后复制
3、ViewChild 方法
因为我觉得这个方法既可以让父组件获取子组件的数据，又可以让父组件给子组件设置变量值等，所以我这里单独分了出来。
父组件：
登录后复制
@ViewChild('child', { static: true })public child!: ElementRef;public print():void{ if(this.child){ // 这里得到child，可以使用child中的所有的public属性方法 this.child.print('hello2'); }}
登录后复制
【示例】
// 父组件import { Component } from '@angular/core';@Component({ selector: 'app-parent', template: ` `})export class ParentComponent { public name:string = '大儿子'; @ViewChild('child', { static: true }) public child!: ElementRef; 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: ` {{name}}
`})export class HeroChildComponent { @Input() public name: string; @Output() public readonly childEmit: EventEmitter = new EventEmitter(); 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('Start');public changeMessage(message: string): void { this.messageSource.next(message);}public getMessageSource(): Observable { 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中组件通信的方法介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2725722.html
