时间戳

首页 > 解决方案 > 导航栏中的 Angular routerLink 不起作用

angular - 导航栏中的 Angular routerLink 不起作用

问题描述

我正在学习教程并构建我的第一个 Angular 应用程序（耶！）。我已按照所有步骤操作，但似乎找不到我的问题。我正在将导航栏中的所有href链接调整为routerLink链接。我只是试图更改“背景”链接，但它不起作用。我确实尝试过直接从 Angular CLI 网站复制和粘贴，但它仍然无法正常工作。任何帮助将不胜感激。

这是我的app-routing.module.ts文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { AccomplishmentsComponent } from './accomplishments/accomplishments.component';
import { AdditionalInformationComponent } from './additional-information/additional-information.component';
import { BackgroundComponent } from './background/background.component';
import { IntroComponent } from './intro/intro.component';
import { SkillsComponent } from './skills/skills.component';


const routes: Routes = [
  { path: '', component: IntroComponent },
  { path: 'about', component: AboutComponent },
  { path: 'accomplishments', component: AccomplishmentsComponent },
  { path: 'additional-information', component: AdditionalInformationComponent },
  { path: 'background', component: BackgroundComponent },
  { path: 'intro', component: IntroComponent },
  { path: 'skills', component: SkillsComponent },
];

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

这是我的 index.html 文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Garbage Coder | Software Engineer</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Garbage Coder</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">About</a>

                                                              <!--Issue is here-->
            <a class="nav-item nav-link" [title]="Background" [routerLink]="['/background']">Background</a>


            <a class="nav-item nav-link" [title]="Skills" href="#">Skills</a>
            <a class="nav-item nav-link" href="#">Accomplishments</a>
          </div>
        </div>
      </nav>
  <app-root></app-root>
  <router-outlet></router-outlet>
</body>
</html>

标签： angularrouterlink

解决方案

重新观看我的教程后，我发现问题是我的导航栏需要在app.component.html中，而不是在评论中建议的@RamChandraNeupane 中的index.html中。谢谢你们每一个人的帮助！

推荐阅读