时间戳

首页 > 解决方案 > 订阅后我应该再次使用 observables 吗？

angular - 订阅后我应该再次使用 observables 吗？

问题描述

我是 Angular 的新手，我正在与另一个也是新手的开发人员合作，我们正在讨论是否应该使用 observables。

searchResourcesBasic(queryResources: IQueryResourceEntityResource){
    let params = new HttpParams();
    params = params.append("resourceTypeId", queryResources.resourceTypeId.toString())
    return this.http.get<ISearchResourceEntityResource[]> 
   (this._constructFullAPIUrl(`search/Resources`), 
   { params });
}

searchProjectsBasic(projectResourceBasicSearch: IProjectResourceBasicSearch) {
    const params = new HttpParams();
    params.set('id', projectResourceBasicSearch.id.toString());
    params.set('projectNum', projectResourceBasicSearch.projectNum);
    params.set('projectName', projectResourceBasicSearch.projectName);
    return this.http.get<IProjectResourceBasicSearch>(this._constructFullAPIUrl(`search/projects`), { 
    params });
}

所以在各自的组件中我们订阅这个并接收我们想要的数据，我们需要将它转移到另一个与它没有关系的组件（它不是父组件或子组件）。

所以我们在谷歌上搜索了一个解决方案，我们发现我们可以提供一个服务来传输数据

export class TransfereService {

    private libraryData: ISearchLibraryItemResource[];
    private resourceBasicData: ISearchResourceEntityResource[];
    private currentSearchResults = new Observable<IProjectResourceBasicSearch>();

    setLibraryData(data) {
        localStorage.setItem("libraryItemsData", JSON.stringify(data));
        this.libraryData = data;
    }

    getLibraryData() {
        return this.libraryData;
    }

    //////////this is mine without observable/////////////
    setResourceBasicData(data) {
        localStorage.setItem("resourceBasicData", JSON.stringify(data));
        this.resourceBasicData = data;
    }

    getResourceBasicData() {
        return this.resourceBasicData;
    }

    //////////// This is his method with an observable/////////////////
    setSearchResults(newSearchResults: Observable<IProjectResourceBasicSearch>) {
        this.currentSearchResults = newSearchResults;
    }

    getSearchResults() {
        return this.currentSearchResults;
    }

}

基本上我们有一个表单，在提交时我们调用 API，获取响应，我们应该在另一个视图中显示它，当在视图/组件之间传递数据时，我看不到再次使用 observables 的意义。

///////////////////////////////////////// ////////////////////////// 编辑 /////////////////////// ///////////////////////////////////////// // 在下面的评论中，我应该补充一点，结果视图可以在用户想要的任何时候访问，而不仅仅是在他进行搜索和填写表单时。

不同之处在于，如果用户没有进行搜索，结果视图应该是空的。

这就是我在搜索视图中调用 API 的原因，或者我在上面调用它的表单视图。

结果视图应该能够处理多个结果，应用程序有多个表单/搜索视图。

-搜索服务：使用 observable 调用 API（上面的第一个代码示例）

- 传输服务：从搜索视图接收数据以将其存储到变量并将其传递给结果视图（这是其他程序员想要添加可观察的部分）。

-搜索/表单视图：表单已填写 -> 订阅调用 API 的服务 -> 将数据传递给转移服务 -> 重定向到结果视图

-结果视图：每次在 ngOnInit 上打开数据时都会查找数据，如果有的话会显示它（这是其他程序员订阅 transfere 服务的地方）。

除非用户进行新的搜索，否则数据不能更改或不应在任何地方更改，但在这种情况下，我会在我的转移服务中替换它。对于应用程序具有的多种形式，我有多个变量

标签： angularobservable

解决方案

为了使视图之间的数据保持一致，您应该使用 observable。当 observable 发出一个新值时，订阅该 observable 的所有组件都将获得该值。否则，如果一个组件使用服务设置数据，其他组件将无法知道，您的应用程序中就会出现不一致。

推荐阅读