如何正确设置最新 Angular 中的 HashLocationStrategy？

Question

所以我在 Angular 做了一个水疗中心。我为朋友制作的，所以我只能访问 ftp 服务器，我无法将其配置为使用默认的 Angular 导航。在项目生成期间，我 'ticked' 路由选项。我尝试根据 Angular 教程设置 HashLocationStrategy，但它不起作用，我也不知道为什么。这是我的代码：

应用-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContactComponent } from './contact/contact.component';
import { DaysComponent } from './days/days.component';
import { MainComponent } from './main/main.component';
import { NavComponent } from './nav/nav.component';
import { ProgramComponent } from './program/program.component';
import { SignupComponent } from './signup/signup.component';
import { TeachersComponent } from './teachers/teachers.component';

const routes: Routes = [
  {path: 'contact', component: ContactComponent},
  {path: 'days', component: DaysComponent},
  {path: '', component: MainComponent},
  {path: 'nav', component: NavComponent},
  {path: 'program', component: ProgramComponent},
  {path: 'signup', component: SignupComponent},
  {path: 'teachers', component: TeachersComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})

export class AppRoutingModule { }

这是我的导航栏：

ul class="navbar-nav ml-auto smooth-scroll mx-auto">
      <li class="nav-item" data-target=".navbar-collapse.show" data-toggle="collapse"><a class="nav-link"
          onclick="location.href='#mainpage'" routerlink="/" href="/">Kezdőlap</a>
      </li>
      <li class="nav-item" data-target=".navbar-collapse.show" data-toggle="collapse"><a class="nav-link"
          routerlink="/program" href="/program">Programok</a></li>
      <li class="nav-item" data-target=".navbar-collapse.show" data-toggle="collapse"><a class="nav-link"
          routerlink="/days" href="/days">A hét menete</a></li>
      <li class="nav-item" data-target=".navbar-collapse.show" data-toggle="collapse"><a class="nav-link"
          routerlink="/sign" href="/signup">Jelentkezés</a></li>
      <li class="nav-item" data-target=".navbar-collapse.show" data-toggle="collapse"><a class="nav-link"
          routerlink="/teachers" href="/teachers">Oktatók</a></li>
    </ul>

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { ContactComponent } from './contact/contact.component';
import { ProgramComponent } from './program/program.component';
import { DaysComponent } from './days/days.component';
import { TeachersComponent } from './teachers/teachers.component';
import { SignupComponent } from './signup/signup.component';
import { MainComponent } from './main/main.component';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    ContactComponent,
    ProgramComponent,
    DaysComponent,
    TeachersComponent,
    SignupComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的 app.component.html:

<app-nav></app-nav>
<router-outlet></router-outlet>

我没有在 index.html 中设置 base href，所以理论上它应该可以工作。我的 url 和 node.js 在启动时看起来像这样： http://localhost:4200/#/ 。每次我单击一个导航项时，它都不会重定向，但导航栏和主要组件会毫无问题地加载。有人可以帮忙吗？

Answer 1

我认为问题是您拼错了 "routerlink" 属性。应该是 routerLink 大写 "L".

如何正确设置最新 Angular 中的 HashLocationStrategy？

How can I setup HashLocationStrategy in latest Angular properly?

routing

angular

hash-location-strategy