Angular2 - APP_BASE_HREF 与 HashLocationStrategy

Question

我有一个 angular 应用程序使用带 HashLocationStrategy 的路由，我需要在主 html 文件中设置不同的值并在路由中设置不同的值。

我试过这个解决方案：

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MyRouting // with useHash set to true
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        { provide: APP_BASE_HREF, useValue: '/prefix' }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

几乎可以正常工作，但值“/prefix”是在散列之后插入的，如下所示：

http://myapp.com/#/prefix/home

而我想要：

http://myapp.com/prefix/#/home

为清楚起见，我的基本标签是：

<base href="/">

Answer 1

啊啊啊啊啊！！成功了。

在您的 index.html 文件中，将 baseurl 指定为“.” 像这样：

<base href=".">

并在 app.module.ts 中的 providers 属性装饰器中指定散列位置策略，如下所示：

@NgModule({
  declarations: [AppComponent],
  imports: [
    FormsModule,
    HttpModule,
    AppRoutingModule,
    ShellModule,
    ShellProvidersModule,
    BrowserModule
  ],
  providers: [
    SessionService,
    { provide: LocationStrategy, useClass: HashLocationStrategy },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

参见：https://github.com/datumgeek/plotter-app-seed-angular2/blob/master/src/app/app.module.ts#L26

运行演示在这里： https://datumgeek.github.io/plotter-app-seed-angular2/#/shell;stateRepositoryId=file-host-01;sessionId=session-03

Answer 2

我遇到了同样的问题并用我自己的 HashLocationStrategy 子类修复了它

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

@Injectable()    
export class CustomLocationStrategy extends HashLocationStrategy {
    prepareExternalUrl(internal: string): string {
        return this.getBaseHref() + '#' + internal;
    }
}

然后在我的模块中使用它

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LocationStrategy } from '@angular/common';
import { APP_BASE_HREF } from '@angular/common';
import { CustomLocationStrategy } from './app.common';

const appRoutes: Routes = [...];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, { useHash: true })
    ],
    providers: [
        { provide: APP_BASE_HREF, useValue: window.location.pathname },
        { provide: LocationStrategy, useClass: CustomLocationStrategy },
    ]
})
export class AppModule {
}

Angular2 - APP_BASE_HREF 与 HashLocationStrategy

Angular2 - APP_BASE_HREF with HashLocationStrategy

angular-routing

angular