angular2+ 组件间通信
angular2+ 不同于react的redux，vue的vuex，angular2+其实可实现数据状态管理的方法很多，以下方案一般也足够支撑普通业务；
父子组件通信
1.1 父组件向子组件传递信息（@Input）
- 父组件绑定信息
<app-child childTitle="可设置子组件标题"></app-child>
- 子组件接收消息
import { Component, OnInit, Input } from '@angular/core';
@Input childTitle: string;
1.2 子组件向父组件传递信息
- 子组件使用 EventEmitter 传递消息
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Output() initEmit = new EventEmitter<string>();
ngOnInit() {
this.initEmit.emit("子组件初始化成功");
}
- 父组件接收消息
<app-child (initEmit)="accept($event)"></app-child>
accept(msg:string) {
alert(msg);
}
使用 ViewChild
// 父组件
import { Component, ViewChild, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Message: {{message}}
<app-child></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {
@ViewChild(ChildComponent) child;
constructor() {}
message: string;
ngAfterViewInit() {
this.message = this.child.message;
}
}
// 子组件
import { Component } from '@angular/core';
@Component({
message: string = 'Hola Mundo';
constructor() {}
})
非父子组件通信
- service服务
// service.ts
import { Component, Injectable, EventEmitter } from "@angular/core";
@Injectable()
export class myService {
public info: string = "";
constructor() {}
}
组件 1 向 service 传递信息
import { myService } from '../../service/myService.service';
...
constructor(
public service: myService
) { }
changeInfo() {
this.service.info = this.service.info + "1234";
}
组件 2 从 service 获取信息
import { myService } from '../../service/myService.service';
constructor(
public service: myService
) { }
showInfo() {
alert(this.service.info);
}
- 使用 BehaviorSubject
优点：真正的发布订阅模式，当数据改变时，订阅者也能得到响应
// service
import { BehaviorSubject } from 'rxjs';
public messageSource = new BehaviorSubject<string>('Start');
changemessage(message: string): void {
this.messageSource.next(message);
}
组件调用 service 的方法传信息和接收信息
changeInfo() {
this.communication.changemessage('Message from child 1.');
}
ngOnInit() {
this.communication.messageSource.subscribe(Message => {
window.alert(Message);
this.info = Message;
});
}
rxjs的observable
- 父组件：app.component.ts、app.component.html
- 子组件：home.component.html、home.component.html
- 服务：shared.service.ts
关键方法 - Observable.subscribe() 用于订阅发送可观察对象的消息
- Subject.next() 用于向观察者对象发送消息，然后将其发送给改观察者的所有订阅者
- Subject.asObservable() 返回一个可观察对象，一旦值变化，便会同时向它的订阅者更新消息。
shared.service公共服务
//shared.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SharedService {
private msg = new Subject<any>();
//发送消息
sendMessage(message: string) {
this.msg.next(message);
}
//清除消息
clearMessage() {
this.msg.next();
}
//获取消息
getMessage(): Observable<any> {
return this.msg.asObservable();
}
}
app父组件获取消息
<!--app.component.html-->
<p-growl [(value)]="alertMsg"></p-growl>
//app.component.ts
public alertMsg: Array<object>;
constructor(private sharedService: SharedService) {}
ngOnInit() {
//消息提示 从service获取消息内容
this.sharedService.getMessage().subscribe(value => {
this.alertMsg = value;
})
}
home子组件发送消息
<!--home.component.html-->
<button (click)="sendMessage()">Send Message</button>
//home.component.ts
constructor(private sharedService: SharedService) {}
public sendMessage() {
//发送消息
this.sharedService.sendMessage('显示成功');
}
其他的通信方式
- 路由传值
- cookie、session、storage
