时间戳

首页 > 解决方案 > environment 与 useValue 的常量

angular - environment 与 useValue 的常量

问题描述

假设我有一组链接，我想将它们添加到单独的文件中，如下所示：

export const SITE_LINKS = [
   { text: 'About', path: '/about' },
   { text: 'Projects', path: '/projects }
]

我会使用它们，比如说在两个地方：header.component.ts和footer.component.ts

<ul>
  <li *ngFor="let link of links">
    <a [routeLink]="link.path">{{ link.text }}</a>
  </li>
</ul>

在 Angular 中添加常量的首选方法是什么？

我可以看到两种方式：

  1. 将它们添加到environment.ts文件中
export const environment = {
  production: false,
  siteLinks: SITE_LINKS
};
  1. 将它们添加为依赖项，以便 DI 框架能够解决它们。
const siteLinks = new InjectionToken<string[]>('site links')

providers: [
  { provide: siteLinks: useValue: SITE_LINKS }
]

我想知道 w/c 一种是更好的方法，在什么情况下我应该更喜欢其中一种？

标签： angulartypescriptangular-material

解决方案

environment.ts

  • 如果您正在处理有关重要凭证或配置的常量，例如API 端点、应用程序 ID、密钥和其他类似的，这些常量将在每个环境中发生变化，请使用此选项。
  • 当我们切换环境时即将改变的变量，例如dev, prod, test
  • 调查一下SITE_LINKS，我认为把它放在这里是不对的，不管环境如何，我认为那些来自的项目SITE_LINKS仍然会保持不变

Providers

  • 是的，你可以使用这个

Alternative

  • 如果这些SITE_LINKS仅用于页眉和页脚并且它们位于 /shared 文件夹中，我建议创建/constants（或您希望命名的任何目录名称）来保存这些类型的常见/常量数据并直接将它们的路径导入他们将被使用的指定组件
/constants
  site-links.constant.ts

推荐阅读