Angular中动态设置BASE_HREF问题的
在Angular中，BASE_HREF是用来定义应用所在URL的基准路径的，通常情况下，它是静态的。但是有些场景下，我们需要动态设置BASE_HREF，比如在打包应用的时候根据环境变量来动态设置，这时候我们可以通过修改index.html文件来实现。
具体步骤如下：
- 在index.html中使用script标签定义一个全局变量，比如设置为window.BASE_HREF，并且设置初始值为"/"。
- 在Angular应用的根模块中定义一个函数，用来获取并动态设置window.__BASE_HREF__的值。
export function getBaseHref(): string { const baseHref = document.querySelector("base").getAttribute("href"); return baseHref.replace(//$/, ""); }
const providers = [{ provide: APP_BASE_HREF, useFactory: getBaseHref }];
@NgModule({ providers: providers })
- 然后在Angular应用的根组件中获取并设置window.__BASE_HREF__的值。
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-root",
template: "
- 最后，在需要使用到动态设置的BASE_HREF的地方，我们可以直接使用window.__BASE_HREF__变量。
例如，我们可以在AppRoutingModule中这样使用：
import { NgModule } from "@angular/core"; import { Routes, RouterModule } from "@angular/router"; import { HomeComponent } from "./home/home.component"; import { AboutComponent } from "./about/about.component";
const routes: Routes = [ { path: