Question

我已经找到了很多关于如何根据环境（dev或prod）在使用angular-in-memory-web-api或真实API之间进行切换的资源，但是我尝试做的却大不相同。 / p>

我希望人们能够在不创建任何帐户的情况下使用in-memory-web-api来试用该产品，以使匿名用户无法与真实的API交互。

他们将使用具有虚拟数据的模拟帐户，并且可以在自己的隔离环境中使用它们。我当时正在考虑向服务中注入一个真正的http服务，以及一个使用in-memory-web-api（称为嘲笑API）的服务，每个服务都将依赖UserService属性来选择要使用的服务（在执行时，无法编译）。

我在业余时间学习Angular，我不知道如何注入两个相同服务的实例，其中一个实例被in-memory-web-api绕过。

这怎么办？或者有更好的方法解决这个问题？

谢谢您的帮助。

Answer 1

尽管我不太喜欢，但我找到了一种实现目标的方法：

所以我仍然将app.module.ts中的HttpClientInMemoryWebApiModule导入，但是我使用passThruUnknownUrl参数，如下所示：

HttpClientInMemoryWebApiModule.forRoot(
  InMemoryDataService, { dataEncapsulation: false, passThruUnknownUrl: true }
)

passThruUnknownUrl允许HttpClient将未在CreateDb方法返回的对象中声明的路径的请求发送到真实API，因此此处的解决方案是为模拟路径指定不同的名称。

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const ACCOUNTS = [
      { id: 11, name: 'BOC' },
      { id: 12, name: 'CCB' },
      { id: 13, name: 'HSBC' }
    ];

    return {mock_accounts: ACCOUNTS};
  }
}

如果我调用mock_accounts路径，InMemoryWebApi将向我发送虚拟数据。然后，我在用户服务上创建一个getApi方法：

private apiUrl = 'api/';
private mockApiUrl = 'api/mock_';
getApi() {
  return this.loggedInUser === 'demo' ? this.mockApiUrl : this.apiUrl;
}

并返回不同的基本路径，无论登录的用户是否为demo。然后，在我的帐户服务中，按以下方式拨打电话：

private accountsPath = 'accounts';
getAccounts(): Observable<Account[]> {
  this.log('AccountService: fetched accounts');
  return this.http.get<Account[]>(this.userService.getApi() + this.accountsPath).pipe(
    tap(_ => this.log('fetched accounts')),
    catchError(this.handleError('getAccounts', []))
  );
}

对于真实用户，调用用户帐户的呼叫将转到api /帐户，而对于演示用户，它将访问api / mock_accounts，这些帐户将被InMemoryWebApi拦截。

它可以工作，但是我对这种方法不满意，如果有人知道更好的解决方案，我将很高兴听到它。

角度如何仅在模拟帐户中使用内存网络API

1 个答案: