Angular2-具有HashLocationStrategy的APP_BASE_HREF [英] Angular2 - APP_BASE_HREF with HashLocationStrategy
本文介绍了Angular2-具有HashLocationStrategy的APP_BASE_HREF的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个角度应用程序通过HashLocationStrategy使用路由,我需要在主html文件中设置不同的值,并在路由中设置不同的
I have an angular application uses routing with HashLocationStrategy, I need to set different value in main html file and different in routing.
我尝试了此解决方案:
@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'是在哈希之后插入的,就像这样:
Works almost well but value '/prefix' is insert after hash, like this:
http://myapp.com/#/prefix/home
我想要的地方:
http://myapp.com/prefix/#/home
为清楚起见,我的基本标记是:
For clarity, my base tag is:
<base href="/">
推荐答案
我遇到了相同的问题,并使用我自己的HashLocationStrategy子类对其进行了修复
I came across the same problem and fixed it with my own Subclass of 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;
}
}
然后在我的模块中使用它
Then just using it in my module
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-具有HashLocationStrategy的APP_BASE_HREF的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文