routerLink 不可点击 - Angular

Question

我面临以下问题。 我已经在 Angular 中实现了路由，但是一旦添加“routerLink='/xyz'”，该元素就不再可单击。

有人知道问题出在哪里吗？

标题-HTML：

<nav
  class="navbar navbar-dark navbar-expand-lg fixed-top"
  [class.navbar-scrolled]="scrolled"
>
  <div class="container-fluid">
    <a class="navbar-brand pe-5 text-light me-5" href="#"
      ><img
        class="image"
        src="assets/busko_logo/Busko_text_logo-01.png"
        alt="busko_logo"
    /></a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarText"
      aria-controls="navbarText"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 gap-3">
        <li class="nav-item">
          <a
            class="nav-link active text-light"
            routerLinkActive="active"
            routerLink="/"
            >Home</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link text-light"
            routerLink="/notImplementedYet"
            routerLinkActive="active"
            >Ort</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link text-light"
            routerLinkActive="active"
            routerLink="/kontakt"
            >Kontakt</a
          >
        </li>
        <li class="nav-item" id="upcoming-phone">
          <a
            class="nav-link"
            routerLink="/notImplementedYet"
            [class.upcoming-anmelden]="isAnmelden"
            >{{ upcoming }}</a
          >
        </li>
      </ul>

      <span class="navbar-text d-none d-lg-block upcoming">
        <button
          type="button"
          class="btn btn-m text-light"
          routerLink="/notImplementedYet"
          [class.upcoming-scrolled]="scrolled"
          [class.upcoming-anmelden]="isAnmelden"
        >
          {{ upcoming }}
        </button>
      </span>
    </div>
  </div>
</nav>

应用程序路由模块.ts：

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

import { KontaktComponent } from '../sections/components/kontakt/kontakt.component';
import { HomeComponent } from '../sections/sites/home/home.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'kontakt', component: KontaktComponent },
];

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

应用程序模块.ts：

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

import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { AppRoutingModule } from './routing/app-routing.module';
import { SectionsModule } from './sections/sections.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, CoreModule, SectionsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

应用程序组件.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

同时我已经尝试并检查了“所有内容”......在我看来，它已正确实现，但仍然无法点击。 -> 一旦 href="" 代替了 routerLink=''，就可以再次单击该元素...（这当然是不希望的）

Answer 1

没有在 core.modules.ts 中导入“RouterModule”：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { FooterComponent } from './components/footer/footer.component';
import { HeaderComponent } from './components/header/header.component';

@NgModule({
  declarations: [HeaderComponent, FooterComponent],
  exports: [HeaderComponent, FooterComponent],
  imports: [CommonModule, RouterModule],
})
export class CoreModule {}

---

_{此答案作为 edit 发布到问题 FIXED - routerLink not clickable - Angular 由 OP stefane9 在 CC BY-SA 4.0 下发布。}