Angular: 一些路由使用 PathLocationStrategy 而另一些路由使用 HashLocationStrategy

Question

我的 app.routes 中有 4 条路线。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const pageRoutes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'transaction', loadChildren: './app/transaction.module#TransactionModule'},
  {path: 'evidence', loadChildren: './app/evidence.module#EvidenceModule'}
];

@NgModule({
  imports: [RouterModule.forRoot(pageRoutes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

在 app.routes 中，我没有为 LocationStrategy 做任何特定的设置。因为对于 transaction 路由，我想使用 angular2 默认的 PathLocationStrategy，它不允许用户刷新页面。

但是对于 evidence 路由，我实际上希望用户能够刷新页面。所以我想在这里使用 HashLocationStrategy 。

这是evidence-routing.module

    @NgModule({

          imports: [RouterModule.forChild([
            {path:':sessionId', component: EvidenceComponent}
            { path: '**', redirectTo: '/404' },
            { path: '404', component: PageNotFoundComponent}
          ])], 
          exports: [RouterModule],
          providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

    })
    export class EvidenceRoutingModule {}

我想在evidence-routing.module里面添加providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]来启用HashLocationStrategy并且只应用到这条路由

但是一旦我把它放在那里，整个应用程序将采用HashLocationStrategy，它也适用于事务路由。

我找不到任何好的解决方案来处理这个问题。

关于这个问题有什么建议吗？

非常感谢！

Answer 1

您不能对不同的路由使用不同的 LocationStrategy，此设置是针对 Router，而不是针对路由，并且一个应用程序只能有一个路由器。

您应该确保服务器配置正确，然后重新加载将适用于所有路由，即使 PathLocationStrategy。

确保您的服务器配置为支持 HTML5 pushState。
这只是意味着服务器 returns index.html 对未知资源的请求。

Angular: 一些路由使用 PathLocationStrategy 而另一些路由使用 HashLocationStrategy

Angular: Some routes use PathLocationStrategy but some other routes use HashLocationStrategy

angular-routing

angular2-routing

angular2-services

angular

angular-router