时间戳

首页 > 解决方案 > 角度注入令牌

angular - 角度注入令牌

问题描述

我在一定程度上了解注入令牌是什么。我只是想不通我们可以使用它的用例。我已经看到了一些使用令牌来管理 API 路径和其他一些配置细节的示例。我怀疑使用注入令牌是否真的是最佳实践，如果是这样，它的用例是什么？

标签： angular

解决方案

TLTR：注入令牌提供了一种将值传递到角度 DI 的方法，能够根据“上下文”更改它们。看看下面的例子！

假设我们有一个应用程序需要在一个 Angular 组件中生成一个绝对 url，并且这个应用程序在服务器和客户端上都可以工作（然后它使用服务器端渲染）。

在客户端，应用程序知道它所在的基本 href，但在服务器上却不知道。在这种情况下，注入令牌会很有用：我们希望在应用程序在服务器上时提供基本 href，但在客户端上不需要它。

这是服务器模块上的代码示例

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
  providers: [
    {provide: APP_BASE_HREF, useValue: 'https://michelepatrassi.io'},
  ]
})
export class AppServerModule {}

使用 APP_BASE_HREF 注入令牌，服务器上的 Angular 应用程序现在具有使用 prepareExternalUrl 之类的函数（它使用 APP_BASE_HREF 创建 url，检查文档）生成绝对 url 所需的东西。

当应用程序在客户端呈现时，APP_BASE_HREF应将其重置为空字符串，以免将其添加两次。这可以通过在app.module

...

{provide: APP_BASE_HREF, useValue: ''}

...

推荐阅读