在Angular中,可以使用服务(Service)来从其上下文之外访问数据并检测变化。下面是一个示例:
首先,创建一个数据服务(data.service.ts):
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private dataSubject = new BehaviorSubject('Initial data');
public data$ = this.dataSubject.asObservable();
constructor() { }
updateData(newData: string) {
this.dataSubject.next(newData);
}
}
在上面的代码中,我们使用了BehaviorSubject
来作为数据的容器,并将其暴露为data$
的可观察对象。
然后,在需要访问数据的组件中,注入数据服务,并订阅数据的变化:
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-my-component',
template: `
{{ data }}
`,
})
export class MyComponent implements OnInit {
data: string;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.data$.subscribe(newData => {
this.data = newData;
});
}
updateData() {
this.dataService.updateData('New data');
}
}
在上面的代码中,我们注入了数据服务,并在ngOnInit
生命周期钩子中订阅了数据的变化。每当数据发生变化时,回调函数会被触发,并更新组件中的数据。
最后,在组件的模板中,我们可以通过{{ data }}
来显示数据,并通过点击按钮来更新数据。
这样,我们就可以从组件的上下文之外访问数据,并且当数据发生变化时,组件会自动检测到并更新视图。