我怎样才能通过我的整个应用程序来倾听我的可观察到的变化

Question

我是rxjs和angular世界的新手。这就是我在应用程序中使用异步以被动方式获取数据的方式。

用户服务

constructor(private http: HttpClient) { }
users$ = this.http.get<any[]>('https://jsonplaceholder.typicode.com/users');

应用程序组件HTML

<div *ngIf="users$ | async as users">
<ul>
<li *ngFor="let user of users">{{ user.name }}</li>
</ul>
</div>

应用程序组件TS文件

constructor(private userService: UserService) { };
users$: Observable<any[]> = this.userService.users$;

数据被提取并显示在HTML中。但是如果我的应用程序组件中有子组件怎么办其中我还想显示提取的数据。此外，我还需要当我的应用程序组件发生变化时，当新数据在我的可观察用户$中排列时，这将反映在包括我的子组件在内的所有应用程序中。我知道我可以使用Input((decorator将数据发送给子级，但我需要一些类似共享服务的东西。此外，Input((只适用于子组件，我需要将更改反映在整个应用程序上。

因此，当我的应用程序组件中有一个按钮，需要从服务器中获取新数据时

<button (click)="getOtherData()">Get other data</button>

getOtherData() {
}

然后我调用新的api来获取新数据，并通过整个应用进行更改

Answer 1

您可以使用BehaviorSubject，这样您就可以像订阅任何其他可观察到的消息一样订阅消息。下面是行为主题用法的代码片段和示例堆栈

export class sharedService{
constructor(){}
private user = new BehaviorSubject<string>('abc');
castUser = this.user.asObservable();

editUser(newUser){
this.user.next(newUser); 
}
}

组件内

ngOnInit(){
this.sharedService.castUser.subscribe(user => this.user = user);
}

Answer 2

创建BehaviourSubject并在多个组件中使用它。如果您的组件和html页面，则处理Null检查

用户服务：

public users$ = new BehaviourSubject<any[]>(null);
fetchUsers() {
this.http.get<any[]>('https://jsonplaceholder.typicode.com/users')
.pipe(take(1)).subscribe((users) => {
this.users$.next(users)
});
}

Answer 3

要在应用程序中共享相同的数据，您应该创建一个在root中提供的服务。在这项服务中，您将使用您的数据公开一个可观察的内容。

伪码：

@Injectable({providedIn: 'root'})
export class DataService {
public data$: Observable<TYPE> = this.getData().pipe(
shareReplay(1) // to NOT execute an additional HTTP-call per subscriber
)
constructur(private http: HttpClient) {}
private getData(): Observable<TYPE> {
return this.http.get(...)
}
}

然后你可以让几个组件/服务通过收听

Component1 {
data$: Observable
constructor(dataService: DataService){}
ngOnInit() {
// get reference. Now you can do whatever you like with this data
this.data$ = this.dataService.data$ 
}
}

你可以在任何地方这样做，所有消费者都将共享相同的数据。