本篇文章带大家详细了解一下angular中组件间通讯的几种。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
angular 组件间的通讯组件间三种典型关系：
父好组件之间的交互（@input/@output/模板变量/@viewchild）
非父子组件之间的交互（service/localstorage）
还可以可以利用 session、 路由参数来进行通讯等
相关教程推荐：《angular教程》
父子组件之间交互子组件编写
child.component.ts@component({ selector: 'app-child', templateurl: './child.component.html', styleurls: ['./child.component.css']})export class childcomponent implements oninit { private _childtitle = '我是子组件'; @input() set childtitle(childtitle: string) { this._childtitle = childtitle; } get childtitle(): string { return this._childtitle; } @output() messageevent: eventemitter<string> = new eventemitter<string>(); constructor() { } ngoninit(): void { } sendmessage(): void { this.messageevent.emit('我是子组件'); } childfunction(): void { console.log('子组件的名字是：' + this.childtitle); }}
child.component.html<div class="panel panel-primary"> <div class="panel-heading">{{childtitle}}</div> <div class="panel-body"> <button (click)="sendmessage()" class="btn btn-success">给父组件发消息</button> </div></div>
父组件
parent-and-child.component.ts@component({ selector: 'app-parent-and-child', templateurl: './parent-and-child.component.html', styleurls: ['./parent-and-child.component.css']})export class parentandchildcomponent implements oninit { constructor() { } ngoninit(): void { } dosomething(event: any): void { alert(event); }}
parent-and-child.component.html<div class="panel panel-primary"> <div class="panel-heading">父组件</div> <div class="panel-body"> <app-child #child (messageevent) = "dosomething($event)"></app-child> <button (click)="child.childfunction()" class="btn btn-success">调用子组件的方法</button> </div></div>
@input 属性绑定是单向的，父组件的属性变化会影响子组件的属性变化， 子组件的属性变化不会反过来影响父组件的的属性变化。
不过，可以利用 @input() 和 @output() 实现属性的双向绑定。
@input()value: string;@output()valuechange: eventemitter<any> = new eventemitter();// 实现双向绑定<input [(value)] = "newvalue"></input>
注意： 使用 [()] 进行双向绑定时，输出属性名必须是输入属性名与 change 组成， 形如： xxxchange。
非父子组件之间交互使用 service 进行交互
event-bus.service.ts/** * 用于充当事件总线 */@injectable()export class eventbusservice { evnetbus: subject<string> = new subject<string>(); constructor() { }}
child1.component.ts@component({ selector: 'app-child1', templateurl: './child1.component.html', styleurls: ['./child1.component.css']})export class child1component implements oninit { constructor(private eventbusservice: eventbusservice) { } ngoninit(): void { } triggereventbus(): void { this.eventbusservice.evnetbus.next('child1 触发的事件'); }}
child1.component.html<div class="panel panel-primary"> <div class="panel-heading">child1 组件</div> <div class="panel-body"> <button (click)="triggereventbus()" class="btn btn-success">触发事件</button> </div></div>
child2.component.ts@component({ selector: 'app-child2', templateurl: './child2.component.html', styleurls: ['./child2.component.css']})export class child2component implements oninit { events: array<string> = new array<string>(); constructor(private eventbusservice: eventbusservice) { } ngoninit(): void { this.listenerevent(); } listenerevent(): void { this.eventbusservice.evnetbus.subscribe( value => { this.events.push(value); }); }}
child2.component.html<div class="panel panel-primary"> <div class="panel-heading">child2 组件</div> <div class="panel-body"> <p *ngfor="let event of events">{{event}}</p> </div></div>
brother.component.ts@component({ selector: 'app-brother', templateurl: './brother.component.html', styleurls: ['./brother.component.css']})export class brothercomponent implements oninit { constructor() { } ngoninit(): void { }}
brother.component.html<div class="panel panel-primary"> <div class="panel-heading">第二种：没有父子关系的组件间通讯</div> <div class="panel-body"> <app-child1></app-child1> <app-child2></app-child2> </div></div>
使用 localstorage 进行交互
local-child1.component.ts@component({ selector: 'app-local-child1', templateurl: './local-child1.component.html', styleurls: ['./local-child1.component.css']})export class localchild1component implements oninit { constructor() { } ngoninit(): void { } writedata(): void { window.localstorage.setitem('message', json.stringify({name: 'star', age: 22})); }}
local-child1.component.html<div class="panel panel-primary"> <div class="panel-heading"> localchild1 组件</div> <div class="panel-body"> <button class="btn btn-success" (click)="writedata()">写入数据</button> </div></div>
local-child2.component.ts@component({ selector: 'app-local-child2', templateurl: './local-child2.component.html', styleurls: ['./local-child2.component.css']})export class localchild2component implements oninit { constructor() { } ngoninit(): void { } readdata(): void { const datastr = window.localstorage.getitem('message'); const data = json.parse(datastr); console.log('name:' + data.name, 'age:' + data.age); }}
local-child2.component.html<div class="panel panel-primary"> <div class="panel-heading">localchild2 组件</div> <div class="panel-body"> <button class="btn btn-success" (click)="readdata()">读取数据</button> </div></div>
local-storage.component.ts@component({ selector: 'app-local-storage', templateurl: './local-storage.component.html', styleurls: ['./local-storage.component.css']})export class localstoragecomponent implements oninit { constructor() { } ngoninit(): void { }}
local-storage.component.html<div class="panel panel-primary"> <div class="panel-heading">第三种方案：利用 localstorge 通讯</div> <div class="panel-body"> <app-local-child1></app-local-child1> <app-local-child2></app-local-child2> </div></div>
最后，关于使用 session、路由参数实现数据交互的方式，这里就不演示了。
更多编程相关知识，请访问：编程视频！！
以上就是详解angular中组件间通讯的几种方法的详细内容。