javascript - 由于 Observable 订阅发生在组件上，因此我很难将逻辑重构到 Angular 2 应用程序的服务层中

Question

我在 Angular 2 应用程序中使用可观察量时发现的一件事是，因为在您订阅组件中的可观察量之前实际上不会“发生”任何事情，因此通过将逻辑移动到服务层。

例如，下面是一个函数示例，该函数接收排序参数，然后相应地过滤显示到 View 的数据。这使用了我的组件中发生订阅的可观察对象，如下所示:

onSortReceived(sort)
{
    if (sort === 'alphabetical')
    {
        this.filtersService.getByFilter(this.page, this.pagesize, this.body)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            this.data = resRecordsData.data;
            this.data.sort((a, b) => a.name.last.localeCompare(b.name.last));
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
    }
    else if (sort === 'reverse alphabetical')
    {
        this.filtersService.getByFilter(this.page, this.pagesize, this.body)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            this.data = resRecordsData.data;
            this.data.sort((a, b) => b.name.last.localeCompare(a.name.last));
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
    }
    else if (sort === 'id')
        {
        this.filtersService.getByFilter(this.page, this.pagesize, this.body)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            this.data = resRecordsData.data;
            this.data.sort((a, b) => b._id.localeCompare(a._id));
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
    }
    else if (sort === 'reset') {
        this.filtersService.getByFilter(this.page, this.pagesize, this.body)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            this.data = resRecordsData.data;
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
    }
}

现在，我不想在执行此操作的每个组件中重复此代码，而是希望将大部分逻辑移至服务层。但由于过滤是在订阅之后发生的，并且订阅发生在组件级别，所以我不确定如何执行此操作。有没有办法可以先过滤，然后订阅可观察的？那会是什么样子？如果我能做到这一点，我可以将大部分代码移至服务层。

Answer 1

像这样怎么样:

filter: any;
onSortReceived(sort)
{
    if (sort === 'alphabetical')
    {
        this.filter = (a, b) => a.name.last.localeCompare(b.name.last);
    }
    else if (sort === 'reverse alphabetical')
    {
         this.filter = (a, b) => b.name.last.localeCompare(a.name.last);
    }
    else if (sort === 'id')
    {
         this.filter = (a, b) => b._id.localeCompare(a._id);
    }
    else if (sort === 'reset') 
    {
           this.filter = undefined;
    }

    this.filtersService.getByFilter(this.page, this.pagesize, this.body)
    .subscribe(resRecordsData => {
        this.records = resRecordsData;
        this.data = resRecordsData.data;
        this.data.sort(this.filter);
    },
    responseRecordsError => this.errorMsg = responseRecordsError);
}

然后您可以根据需要更轻松地将代码移至服务中。

注意:此代码未经语法检查或测试。