2

我找到了很多关于如何根据环境（开发或产品）在使用 angular-in-memory-web-api 或真实 API 之间切换的资源，但我想做的却完全不同。

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

他们将使用一个带有虚拟数据的模拟账户，这些数据已经可以在他们自己的隔离环境中使用。我正在考虑向服务中注入一个真正的 http 服务和一个使用 in-memory-web-api（名为 mockAPI）的服务，并且每个服务都将依赖 UserService 属性来选择要使用的服务（这将在执行时，不编译）。

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

怎么能这样做，或者有没有更好的方法来解决这个问题？

谢谢您的帮助。

4

1 回答 1

0

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

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

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

passThruUnknownUrl 允许 HttpClient 向真实 API 发送请求，以获取未在 CreateDb 方法返回的对象中声明的路径，因此这里的解决方案是为模拟路径赋予不同的名称。

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

并返回不同的基本路径登录用户是否是演示。然后在我的帐户服务中，我进行如下调用：

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/accounts，而对于演示用户，它将转到 api/mock_accounts，这将被 InMemoryWebApi 拦截。

它有效，但我对这种方法不满意，如果有人知道更好的解决方案，我会很高兴听到它。

于 2018-08-23T00:09:39.680 回答