Angular2 – 带有HashLocationStrategy的APP_BASE_HREF

发布时间：2020-12-17 07:58:22 所属栏目：安全来源：网络整理

导读：我有一个角度应用程序使用路由与HashLocationStrategy,我需要在主html文件中设置不同的值和路由不同. 我试过这个解决方案： @NgModule({ imports: [ BrowserModule,FormsModule,HttpModule,MyRouting // with useHash set to true ],declarations: [ AppComp

我有一个角度应用程序使用路由与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="/">

我遇到了同样的问题并用我自己的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 })
    ],useValue: window.location.pathname },{ provide: LocationStrategy,useClass: CustomLocationStrategy },]
})
export class AppModule {
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!