APP_BASE_HREF: OpaqueToken

暴露一个App基础路径。
APP_BASE_HREF token表示使用PathLocationStrategy调用一个基础路径。

如果你正使用PathLocationStrategy,你必须提供给provider一个字符串用于表示URL的前缀,这个前缀在生成和识别URL的时候应当已经预存完毕。

    import {Component, NgModule} from '@angular/core';
    import {APP_BASE_HREF} from '@angular/common';
    @NgModule({
      providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
    })
    class AppModule {}
### Angular 中 `APP_BASE_HREF` 的用法 在 Angular 应用程序中,路由模块依赖于基础路径来解析相对 URL。为了配置应用程序的基础路径,可以使用 `APP_BASE_HREF` 注入令牌[^1]。 当部署应用到服务器上的子目录而不是根目录时,需要指定该子目录作为应用的基础路径。通过提供 `APP_BASE_HREF`,可以在启动期间告诉 Angular 路由器这个基础路径是什么: ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule, APP_BASE_HREF } from '@angular/router'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, RouterModule.forRoot([ // 定义路由配置... ]), ], providers: [{ provide: APP_BASE_HREF, useValue: '/my-subdir/' }], bootstrap: [AppComponent], }) export class AppModule {} ``` 在这个例子中,假设应用被部署到了 `/my-subdir/` 子目录下,则应将 `useValue` 设置为对应值。这会告知路由器所有链接都相对于此路径构建。 如果未正确设置 `APP_BASE_HREF` 或者完全忽略了它,在某些情况下可能会遇到页面刷新后找不到资源的问题,因为浏览器尝试访问错误的位置去加载组件或其他静态文件[^2]。 对于开发环境中的本地测试,默认情况下不需要显式设定 `APP_BASE_HREF`,因为它通常会被设为 `'/'` 表示根目录。但在生产环境中特别是非根路径部署的情况下,合理配置这一参数非常重要。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值