我正在学习教程并构建我的第一个Angular应用程序(耶！(。我已经采取了所有步骤，但似乎找不到我的问题。我正在将导航栏中的所有href链接调整为routerLink。我只是想更改"背景"链接，但它不起作用。我甚至尝试过直接从Angular CLI网站复制和粘贴，但仍然不起作用。如有任何帮助，我们将不胜感激。
这是我的应用程序路由.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>
我已经完成了您的stackblitz演示。发现即使我直接在栏中键入组件的url，它也无法导航。
然后我检查了应用程序模块的路线配置，发现你在那里有错误。
const appRoute: Route = [
{ path: 'about', component: About },
{ path: 'service', component: Service },
{ path: 'dashboard', component: Dashboard, canActivate: [] }
]
这应该像Route变成Routes 一样改变
const appRoute: Routes = [
{ path: 'about', component: About },
{ path: 'service', component: Service },
{ path: 'dashboard', component: Dashboard, canActivate: [] }
]
从这里进口，
import { Routes } from '@angular/router';
试试看，让我知道。
-----编辑------
除此之外，您还有多个路由器出口(一个在应用程序组件html中，另一个在index.html中(，除非其中至少有一个是命名的路由器出口，否则这是不允许的。似乎这些都是问题所在。我强烈建议您在angular cli生成初始项目时保持index.html文件的原样。从应用程序组件开始编写代码到子组件。
另一个问题是，您没有将应用程序组件渲染到dom，因为您已将应用程序的选择器从应用程序根更改为我的应用程序，但仍使用标签app root在index.html中渲染应用程序组件。也更新该标签，以便渲染应用程序。
重新观看我的教程后，我发现问题是我的导航栏需要位于app.component.html中，而不是@RamChandraNeupane在评论中建议的index.html。感谢大家的帮助！
像这样尝试routerLink="background"删除"/"和两个方括号
试试这个，你必须去掉括号。。。
<div class="pl-20">
<a class="color-grey2 font-14" routerLink="/transformer-management" routerLinkActive="active">
<span>Transformers</span>
</a>
</div>
<div class="pl-20">
<a class="color-grey2 font-14" routerLink="/cost-file-management" routerLinkActive="active">
<span>Costs</span>
</a>
</div>