Angular 4 路由 - base-href 被添加到 hashPath 之前

Question

当 angular 应用程序的构建版本放在根目录中时，它会生成 url 就好了

http://thisismydomain.com/#/master/data-source-management/data-sources/list

但是当它被放置在根目录更深处的某个地方并且我使用 base-href 时，路由器在加载页面时仍然表现良好，但是一旦加载，base-href 就会像以下：

http://thisismydomain.com/deeper/inside/#/deeper/inside/master/data-source-management/data-sources/list

预期 Url：

http://thisismydomain.com/deeper/inside/#/master/data-source-management/data-sources/list

我发现问题与在 app.module.ts 的导入部分注入 APP_BASE_HREF 条目有关？

providers: [
AuthenticationService,
KaribaService,
GlobalService,
NotificationService,
/*
{
  provide: APP_BASE_HREF,
  useFactory: getBaseHref,
  deps: [PlatformLocation]
},
*/
CustomizationService

]

评论解决了问题，但我需要它以便在我的服务中注入 BASE_HREF 以从资产文件夹中提取内容。帮助？

P.S。我正在使用延迟加载。

Answer 1

我通过扩展 HashLocationStrategy 创建 CustomLocationStrategy 来解决它，因为这似乎是唯一的解决方案。

import {Injectable} from '@angular/core';
import {HashLocationStrategy} from "@angular/common";

@Injectable()    
export class CustomLocationStrategy extends HashLocationStrategy {

  prepareExternalUrl(internal: string): string {
    const url = this.getBaseHref() + '#' + internal;
    return url;
  }
}

在 app.module.ts

中导入了自定义 class 以及 APP_BASE_HREF 和 LocationStrategy

import { APP_BASE_HREF, LocationStrategy } from "@angular/common";
import { CustomLocationStrategy } from './common/services/customLocationStrategy.service';

并在提供商部分添加了以下内容。

providers: [
  {
    provide: APP_BASE_HREF, 
    useValue: window.location.pathname
  }, 
  {
    provide: LocationStrategy, 
    useClass: CustomLocationStrategy
  }
]

Angular 4 路由 - base-href 被添加到 hashPath 之前

Angular 4 Routing - base-href gets prepended to hashPath

lazy-loading

angular

angular4-router