解构Angular依赖注入的Multi选项以实现更佳代码组织

在许多应用程序中，有一个包含所有应用程序端点信息的源代码文件十分常见。例如，如果我们使用的是Angular，它可能如下所示：

// endpoints.ts
export const ENDPOINTS = {
  users: 'api/users',
  posts: 'api/posts',
  comments: 'api/comments',
};

乍看之下，这看起来没有任何问题。然而，随着应用程序的不断发展，我们可能会遇到以下问题：

• 违反单一责任原则。 端点相关代码分散在多个文件中，导致代码的可读性和可维护性下降。
• 容易产生合并冲突。 多人同时开发同一个应用程序时，在端点文件中容易产生合并冲突。
• 端点不可移植。 如果应用程序需要部署到不同的环境中，那么端点也需要相应地进行修改。
• 难以查找端点位置。 在文件中查找特定端点时可能需要花费大量时间。

为了解决这些问题，我们可以利用Angular依赖注入的multi选项来对端点进行组织。multi选项允许我们将多个提供程序与同一个令牌关联。这样，我们可以将所有端点放在一个文件中，同时保持代码的可读性和可维护性。

以下是如何使用multi选项来组织Angular端点的示例：

// endpoints.ts
export const ENDPOINTS = {
  users: 'api/users',
  posts: 'api/posts',
  comments: 'api/comments',
};

// app.module.ts
import { NgModule } from '@angular/core';
import { ENDPOINTS } from './endpoints';

@NgModule({
  providers: [
    {
      provide: ENDPOINTS,
      useValue: ENDPOINTS,
      multi: true,
    },
  ],
})
export class AppModule {}

现在，我们可以在应用程序的任何地方使用ENDPOINTS令牌来访问端点信息。例如，以下是如何在组件中使用ENDPOINTS令牌来获取用户端点：

import { Component, Inject } from '@angular/core';
import { ENDPOINTS } from './endpoints';

@Component({
  selector: 'my-component',
  template: `
    <p>User endpoint: {{ userEndpoint }}</p>
  `,
})
export class MyComponent {
  constructor(@Inject(ENDPOINTS) private endpoints: any) {}

  get userEndpoint(): string {
    return this.endpoints.users;
  }
}

利用Angular依赖注入的multi选项，我们可以对端点进行更好的组织，从而提高代码的可读性和可维护性。此外，我们还可以避免违反单一责任原则，减少合并冲突，并使端点更加可移植。