如何在Angular 5中使用PathLocationStrategy设置base href或APP_BASE_HREF？

嘿，我来帮你梳理下这个问题——你代码里的this.PathLocation.prepareExternalUrl("'/'+this.referralCode")写法确实有问题，下面一步步给你讲清楚原因、修正方法，以及如何正确配置base href/APP_BASE_HREF：

一、当前代码的核心问题 #

1. 字符串拼接错误：你用双引号把'/'+this.referralCode整个包起来了，这会让它变成一个字面量字符串，不会解析this.referralCode的实际值。比如如果你的referralCode是xyz789，这行代码生成的是'/'+this.referralCode，而不是你想要的/xyz789。
2. 对prepareExternalUrl的误解：这个方法的作用是把相对路径转换成包含base href的完整外部URL，不需要手动加引号，直接传入正常的路径字符串就行。而且多数情况下，用Angular Router跳转时根本不需要手动调用它——Router会自动处理base href。
3. Router未注入：你代码里调用了this.router.navigate()，但构造函数里没有注入Router，这会导致运行时报错。

二、修正后的代码示例 #

先把你的CommonServicesService改成正确的样子：

import { Router } from "@angular/router";
import { HttpClient } from "@angular/common/http";
import { environment } from "../../environments/environment";
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

@Injectable()
export class CommonServicesService {
  referralCode: any = localStorage.getItem('referenceCode');

  // 一定要注入Router，不然没法调用navigate方法
  constructor(
    private location: Location,
    private router: Router
  ) { }

  redirectAfterSuccessfulLogin() {
    // 先确定跳转的目标URL
    let targetUrl = "/";
    if (localStorage.getItem("redirectUrl")) {
      targetUrl = localStorage.getItem("redirectUrl")!;
      localStorage.removeItem("redirectUrl");
    }

    // 如果有referralCode，把它拼到目标URL上（根据你的路由需求选一种方式）
    if (this.referralCode) {
      // 方式1：作为查询参数，比如 /home?ref=xyz789
      targetUrl = `${targetUrl}?ref=${this.referralCode}`;
      // 方式2：作为路由参数（需要你的路由配置里有对应的占位符，比如 { path: 'home/:ref', ... }）
      // targetUrl = `${targetUrl}/${this.referralCode}`;
    }

    // 用Router跳转，自动处理base href，不用手动调用prepareExternalUrl
    this.router.navigateByUrl(targetUrl);

    // 如果你确实需要生成可直接用于浏览器地址栏的外部URL（比如跳转到外部网站时），正确用法是这样：
    // const fullExternalUrl = this.location.prepareExternalUrl(targetUrl);
    // window.location.href = fullExternalUrl;
  }
}

三、正确配置PathLocationStrategy和base href #

Angular 5默认就是用PathLocationStrategy，但你需要确保base href配置正确：

1. 静态配置（通过index.html） #

在src/index.html的<head>标签里添加base标签，这是最常用的方式：

<!-- 部署在根路径时用这个 -->
<base href="/">
<!-- 如果部署在子路径，比如 https://your-domain.com/my-app/，就改成 -->
<base href="/my-app/">

2. 动态配置（通过APP_BASE_HREF） #

如果需要动态设置base href（比如从环境变量或服务器获取），可以在根模块中注入APP_BASE_HREF：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    // 显式指定PathLocationStrategy（其实默认就是这个，可写可不写）
    { provide: LocationStrategy, useClass: PathLocationStrategy },
    // 动态设置base href，这里可以换成你需要的动态值
    { provide: APP_BASE_HREF, useValue: '/' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外注意 #

使用PathLocationStrategy时，你的服务器需要做相应配置——确保所有路由路径都指向index.html，否则用户刷新页面会出现404错误。比如Nginx需要配置try_files，Apache需要配置RewriteRule。

内容的提问来源于stack exchange，提问作者hs27