通过服务发出事件的正确方法是什么?我已读到在服务中声明
EventEmitter
不合适。
我想实现以下目标。
我的根组件中有2个组件,当我单击第一个组件时,我想知道第一个组件在第二个组件中被单击。
您可以在四种可能的情况下共享数据,但这取决于您的要求
父对子:通过输入共享数据
子级到父级:通过ViewChild共享数据
子级到父级:通过Output()和EventEmitter共享数据
不相关的组件:与服务共享数据
在缺乏直接连接的组件之间传递数据时,例如siblings、grandchildren等,您应该使用共享服务。当您拥有应该保持同步的数据时,我发现RxJSBehaviorSubject 在这种情况下非常有用。
您还可以使用常规 RxJS 主题通过服务共享数据,但这就是为什么我更喜欢 BehaviorSubject。
它将始终返回 subscription 上的当前值 - 无需调用 onnext 它有一个 getValue() 函数来提取最后一个值作为原始数据。 它确保组件始终接收最新的数据。 在服务中,我们创建一个私有BehaviorSubject,它将保存消息的当前值。我们定义一个 currentMessage 变量,将此数据流处理为将由组件使用的可观察对象。最后,我们创建调用BehaviorSubject 上的 next 来更改其值的函数。
父组件、子组件和兄弟组件都接受相同的处理。我们在构造函数中注入 DataService,然后订阅 currentMessage observable 并将其值设置为等于消息变量。
现在,如果我们在这些组件中的任何一个中创建一个函数来更改消息的值。当执行此函数时,新数据会自动广播到所有其他组件。 这是一个代码片段。
数据.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject('default message');
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}
parent.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-parent',
template: `
{{message}}
`,
styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}
第二个组件.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-sibling',
template: `
{{message}}
<button (click)="newMessage()">New Message</button>
`,
styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
newMessage() {
this.data.changeMessage("Hello from Sibling")
}
}
我使用 Replaysubject 来通知当服务提供的数据发生变化时需要更新到 gui 组件中的 gui 的数据变化。
在我的例子中,该服务有一个轮询间隔,并且它所保存的数据可能会在没有任何用户操作的情况下发生变化。