javascript - 在 Angular 应用程序中抽象到服务层时，功能无法正常工作

Question

我有一个过滤器函数，它接受用户过滤器选择并相应地返回数据。现在我在多个组件中使用相同的功能，因此为了保持干燥，我想做的就是重构到服务层中。但是，由于某种原因，我没有得到正确的实现，因为将部分功能重构到服务层后，数据没有按预期进行过滤。

首先，这是当前的组件函数——它正在按预期工作:

public onFilterReceived(value, type, page) {
    if (value && type === 'lan') {
        this.language = value;
    }
    else if (value && type === 'location') {
        this.location = value;
    }
    else if (value && type === 'zip') {
        this.zipcode = value;
    }
    else if (value && type === 'firstName') {
        this.firstName = value;
    }
    else if (value && type === 'lastName') {
        this.lastName = value;
    }
    else if (value && type === 'branch') {
        this.branch = value;
    }

    let fn = resRecordsData => {
        this.records = resRecordsData;
        let data = resRecordsData.data;
    };

     this.filtersService.getByFilters(
        page, this.pagesize, this.currentStage, this.language, this.location, this.zipcode, this.firstName, this.lastName, this.branch, fn);
}

因此，通过这项工作，我尝试将函数的第一部分(根据所选过滤器处理条件逻辑)重构到服务层中。所以我的服务层看起来像这样:

public processByTypes(value, type) {
    let language, location, zipcode, firstName, lastName, branch;

    if (value && type === 'lan') {
        console.log(value);
        language = value;
    }
    else if (value && type === 'location') {
        location = value;
    }
    else if (value && type === 'zip') {
        zipcode = value;
    }
    else if (value && type === 'firstName') {
        firstName = value;
    }
    else if (value && type === 'lastName') {
        lastName = value;
    }
    else if (value && type === 'branch') {
        branch = value;
    }
}

然后在我重构的组件中，如下所示:

public onFilterReceived(value, type, page) {

    this.filtersService.processByTypes(value, type);

    let fn = resRecordsData => {
        this.records = resRecordsData;
        let data = resRecordsData.data;
    };

     this.filtersService.getByFilters(
        page, this.pagesize, this.language, this.location, this.zipcode, this.firstName, this.lastName, this.branch, fn);
}

但这不起作用。

我知道过滤器选择正在进入服务层，因为我的“语言”console.log 成功地将用户过滤器选择的值打印到控制台。但是，该值不会传递回组件层，然后用于相应地过滤数据。我在这个实现中缺少什么？这可能是相当明显的事情，也许我已经盯着它看了太久，但我没有看到它。

Answer 1

filtersService.processByTypes 中声明的变量是局部变量。除非您返回这些值，否则它们在函数结束后没有任何意义。

您可以像这样从函数返回值:

public processByTypes(value, type) {
    let language, location, zipcode, firstName, lastName, branch;

    if (value && type === 'lan') {
        console.log(value);
        language = value;
    }
    else if (value && type === 'location') {
        location = value;
    }
    else if (value && type === 'zip') {
        zipcode = value;
    }
    else if (value && type === 'firstName') {
        firstName = value;
    }
    else if (value && type === 'lastName') {
        lastName = value;
    }
    else if (value && type === 'branch') {
        branch = value;
    }
    return {language:language, location:location, zipcode:zipcode, firstName:firstName, lastName:lastName, branch:branch};
}

并在组件中使用它，如下所示:

public onFilterReceived(value, type, page) {

    let selections = this.filtersService.processByTypes(value, type);

    let fn = resRecordsData => {
        this.records = resRecordsData;
        let data = resRecordsData.data;
    };

    this.filtersService.getByFilters(
        page, this.pagesize, selections.language, selections.location, selections.zipcode, selections.firstName, selections.lastName, selections.branch, fn);
}