angular cli 中禁用了路由器链接

Question

我正在使用 Angular CLI 13.3.3

问题详情

路由器链接不工作。好像残疾了甚至无法点击。

问题视频

Issue described in video. Please click here

在浏览器中呈现 Html

HTML代码

<a class="nav-link" routerLink="user-role-management">Users</a>

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppComponent,
        AnnonymousbaseComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        NgbModule,
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

app.component.html

<header></header>
<div class="container-fluid">
    <div class="row justify-content-center">
        <router-outlet></router-outlet>
    </div>
</div>

应用路由模块

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

import {UsermanagementComponent} from './usermanagement/usermanagement.component';
import { CommonModule } from '@angular/common';

const routes: Routes = [
    {
        component: UsermanagementComponent,
        path: 'user-role-management'
    }
];

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

我错过了什么吗？如果您需要更多信息，请告诉我。

编辑 - 1

此特定问题仅出现在导航栏中。

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Angular CLI </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" routerLink="register">Register</a>
                </li>               
                <li class="nav-item">
                    <a class="nav-link" routerLink="">Login</a>
                </li>               
            </ul>
        </div>
    </div>
</nav>

Answer 1

您可以尝试使用 [routerLink] 指令。确保 app.module.ts 中的 declarations 包含您要在 [routerLink] 中使用的组件。此外，您可能必须在 app.module.ts 中导入 RouterModule？！我为此做了一个快速 StackBlitz 示例。

我不知道为什么这些组件在生成时没有自动放入 declarations 中，但这应该可以解决问题并使链接可点击。

这些是 list.component.html 中的链接：

<ul>
  <li><a [routerLink]="['/details', '1']">Product 1</a></li>
  <li><a [routerLink]="['/details', 2]">Product 2</a></li>
</ul>

这是app.module.ts

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

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { RouterModule } from '@angular/router'; // This was the missing import.
import { DetailsComponent } from './details/details.component';
import { ListComponent } from './list/list.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: ListComponent },
      { path: 'details/:id', component: DetailsComponent },
    ]),
    RouterModule,
  ],
  declarations: [AppComponent, HelloComponent, ListComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

angular cli 中禁用了路由器链接

router links are disabled in angular cli

angular

angular13

此特定问题仅出现在导航栏中。