5种Angular中组件通信的方法介绍

组件化是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的时候才会发布其他通信方式
路由传值、浏览器本地存储（localst

SEO优化中怎么发外链不容易被删
电脑腾讯会议摄像头打不开 腾讯会议如何开启摄像头
云服务器618抢购
SEO优化关键词又该如何把控好密度呢？
阿里云服务器怎么网站
云服务器2折秒杀
服务器修改密码
阿里云服务器购买认证流程