Question

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

首先，这是当前的组件功能 - 按预期工作：

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用于＆＃34;语言＆＃34;成功将用户过滤器选择的值打印到控制台。但是，该值不会传递回组件层，然后用于相应地过滤数据。我在这个实现中缺少什么？这可能是相当明显的事情，也许我已经盯着它看了太长时间，但我没有看到它。

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);
}

在Angular App中提取服务层时功能不起作用

1 个答案: