Javascript 在Angular应用程序中抽象到服务层时函数不工作

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

首先，这里是当前组件函数——它按预期工作：

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

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

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成功地将用户过滤器选择的值打印到控制台。但是，该值不会传递回组件层，然后用于相应地过滤数据。我在这个实现中遗漏了什么？这可能是相当明显的事情，可能我盯着它看得太久了，但我没有看到。

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

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

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

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

---

在您的工作实现中，您正在将值分配给组件中

此

对象的相应属性。但是，当您将其移动到服务时，所分配的值将分配给局部变量，该局部变量的作用域仅对服务中的公共方法

processByTypes

可见。基本上，在调用服务方法后，您不会从服务方法返回要在组件内处理的内容。这是实现这一目标的最佳途径吗？我不确定，但这就是为什么它对您不起作用的原因。那么，如果我在服务层中的函数的每个块上都有一个返回值，那么可能吗？我会试着玩这个。是的，就玩吧。一旦你知道了原因，就试着避免做同样的事情。这看起来基本上是正确的。我必须做一些额外的调整来引入值，但我认为这种方法的一种变体会起作用。谢谢顺便说一句，使用ES6，您应该能够“返回{语言、位置、zipcode等…”