typescript 以#开头的URL的Angular 路由不起作用

fzwojiic  于 2023-06-24  发布在  TypeScript
关注(0)|答案(1)|浏览(147)

我想为angular 2应用程序创建以#开头的url路由。但是,Angular 重定向到主页而不是组件。如何解决这个问题?我用了火柴,但它不工作。我对同一个组件使用了两个URL,但它不适用于#。(URL:customcomponent和#/customcomponent)。我也试过使用matcher,但它也不起作用。

9lowa7mx

9lowa7mx1#

默认路由策略基于HTML5历史API,该API在URL中不使用“#”符号。如果你想在Angular 2应用程序中使用以'#'开头的URL,你需要以不同的方式配置路由。
您可以使用Angular提供的“HashLocationStrategy”。此策略在URL中使用散列符号“#”,并启用基于片段标识符的路由。
在您的app.module.ts

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  // ...
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
  // ...
})
export class AppModule { }

Angular将在URL中使用哈希符号并相应地处理路由。例如,#/customcomponent将被识别为到“CustomComponent”的路由。
一旦你做了这个更改,Angular将不再重定向到主页时使用的URL以'#'开头。相反,它将根据您设置的路由配置正确导航到指定的组件。
这里有一些参考链接
1.https://angular.io/api/common/HashLocationStrategy
1.https://www.tektutorialshub.com/angular/angular-location-strategies/
希望有帮助。

相关问题