Angular:一些路由使用 PathLocationStrategy 但其他一些路由使用 HashLocationStrategy [英] Angular: Some routes use PathLocationStrategy but some other routes use HashLocationStrategy

问题描述

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

I have 4 routes in my app.routes.

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，它不允许用户刷新页面.

In the app.routes, I didn't do any specific setup for LocationStrategy. Since for the transaction route, I want to use the angular2 default PathLocationStrategy, which doesn't allow the user to refresh the page.

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

But for the evidence route, I actually want the users to be able to refresh the page. So I'd like to use HashLocationStrategy here.

这是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 并且仅适用于此路线.

I wanted to add providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }] inside evidence-routing.module to enable HashLocationStrategy and only apply to this route.

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

But once I put it there, the entire application will adopt the HashLocationStrategy, it also works for the transaction route.

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

I couldn't find any good solutions to handle this.

对这个问题有什么建议吗?

Any advice on this issue?

非常感谢！

推荐答案

不能为不同的路由使用不同的LocationStrategy，这个设置是针对Router的，不是路由，一个应用只能有一个路由器.

You can't use a different LocationStrategy for different routes, this setting is for the Router, not for routes, and there can only be exactly one router for one application.

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

You should rather ensure the server is configured properly, then reload will work for all routes even with PathLocationStrategy.

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

Ensure your server is configured to support HTML5 pushState.
This just means that the server returns index.html for requests to unknown resources.

这篇关于Angular:一些路由使用 PathLocationStrategy 但其他一些路由使用 HashLocationStrategy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！