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

简介: 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。

相关文章
|
4月前
|
JavaScript
Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
46 0
|
4月前
|
搜索推荐
Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
37 0
|
1月前
|
JavaScript 前端开发 安全
Angular Renderer2 的作用和使用场景介绍
Angular Renderer2 的作用和使用场景介绍
28 0
|
1月前
|
存储 搜索推荐 API
通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
25 0
|
3月前
|
设计模式 监控 测试技术
Angular 使用 Constructor Parameters 进行依赖注入的优缺点
Angular 使用 Constructor Parameters 进行依赖注入的优缺点
19 0
|
3月前
|
设计模式
Angular 依赖注入领域里 optional constructor parameters 的概念介绍
Angular 依赖注入领域里 optional constructor parameters 的概念介绍
17 0
|
3月前
Angular 依赖注入系统里 Injection token PLATFORM_ID 的使用场景
Angular 依赖注入系统里 Injection token PLATFORM_ID 的使用场景
18 0
|
3月前
|
开发者
Angular 两种依赖注入的实现方法介绍
Angular 两种依赖注入的实现方法介绍
28 0
|
4月前
Angular ModuleWithProviders 类型的使用场景介绍
Angular ModuleWithProviders 类型的使用场景介绍
27 0
|
4月前
|
设计模式 前端开发 JavaScript
Angular 应用开发中 Injection Token 的使用方法介绍
Angular 应用开发中 Injection Token 的使用方法介绍
35 0

相关产品

  • 云迁移中心