Angular 依赖注入系统里 Injection token APP_BASE_HREF 的使用场景

Angular 的依赖注入系统是其核心功能之一，它提供了一种优雅的方式来管理应用中的服务和组件之间的依赖关系。在 Angular 中，我们可以使用各种方式来提供依赖项，而 APP_BASE_HREF 是其中的一个依赖注入标记。

APP_BASE_HREF 是一个 Injection token，它在 Angular 的路由系统中扮演了重要的角色。该标记用于设置 Angular 应用的基础 URL，即应用在浏览器的地址栏中显示的 URL。这个基础 URL 是路由器在解析和生成 URL 时使用的。当我们使用 HTML5 的 pushState 路由策略时，这个标记尤其重要。因为在这种情况下，我们需要在 <base href="/"> 标签中设置正确的 URL，以便路由器可以正确地解析和生成 URL。如果我们不设置这个标记，那么 Angular 将会使用当前页面的 URL 作为基础 URL。

让我们通过一个例子来看一下如何使用 APP_BASE_HREF。假设我们的 Angular 应用部署在服务器的 /my-app/ 目录下，而不是服务器的根目录。如果我们没有设置 APP_BASE_HREF，那么路由器会将当前页面的 URL（例如 http://localhost/my-app/）作为基础 URL。这将会导致问题，因为路由器在解析和生成 URL 时，会认为所有的 URL 都是相对于 http://localhost/ 的，而不是相对于 http://localhost/my-app/。为了解决这个问题，我们可以在应用的主模块中，提供 APP_BASE_HREF 并设置其值为 /my-app/。

以下是如何在 AppModule 中设置 APP_BASE_HREF 的示例代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/my-app/' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在这个例子中，我们使用 provide 选项来指定我们要提供的 Injection token，然后使用 useValue 选项来设置这个 Injection token 的值。当 Angular 创建和提供依赖项时，它将使用我们提供的值，而不是默认的值。

总的来说，APP_BASE_HREF 是一个在 Angular 应用中设置基础 URL 的重要工具。它可以帮助我们解决在使用 HTML5 的 pushState 路由策略时可能遇到的 URL 解析和生成问题。如果我们的 Angular 应用不是部署在服务器的根目录下，我们就需要使用这个 Injection token 来设置正确的基础 URL。