0

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

应用路由.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>

应用模块.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 中设置基本 href，所以理论上它应该可以工作。我的 node.js 网址在启动时看起来像这样：http://localhost:4200/#/。每次我单击导航项时，它都不会重定向，但导航栏和主组件会毫无问题地加载。有人可以帮忙吗？

4

1 回答 1

0

我认为问题在于您拼错了“routerlink”属性。它应该是routerLink大写的“L”。

于 2020-01-02T19:16:19.590 回答