在服务中使用RxJS的Subject或BehaviorSubject,以便在更改发生时通知组件。然后,组件应该订阅这些主题来接收更改通知并更新视图。
例如,一个包含Subject的服务:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class DataService {
private data = ['item 1', 'item 2', 'item 3'];
private dataSubject = new Subject();
getData() {
return this.data;
}
addData(item: string) {
this.data.push(item);
this.dataSubject.next(this.data); // 发送通知
}
getDataSubject() {
return this.dataSubject.asObservable();
}
}
在组件中,订阅该主题以接收更改通知:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-data',
templateUrl: './data.component.html',
styleUrls: ['./data.component.css'],
})
export class DataComponent implements OnInit {
data: string[];
constructor(private dataService: DataService) {}
ngOnInit(): void {
this.data = this.dataService.getData(); // 初始化数据
// 订阅主题以接收更改通知
this.dataService.getDataSubject().subscribe((updatedData: string[]) => {
this.data = updatedData;
});
}
addData(item: string) {
this.dataService.addData(item);
}
}