通过 Bootstrap 导航栏路由不同的 Angular 组件

Question

我正在尝试使用导航栏导航到 angular 中的不同组件。

首先，我为此导航栏创建了一个名为 header 的组件，并为导航栏编写了 HTML 代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">NBA Statistics</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
          <li *ngFor = "let items of menuItems" class="nav-item">
            <a class="nav-link" href="{{items.linkURL}}">{{items.linkName}} <span class="sr-only">(current)</span></a>
          </li>
      </ul>
    </div>
  </nav>

在我的 header.component.ts 中，我为上面的 HTML 代码中引用的不同页面包含了一个数组：


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  menuItems = [

    {linkId: 1, linkName: 'Search by Player', linkURL: 'home'},
    {linkId: 2, linkName: 'Lab 5', linkURL: 'lab5'},
    {linkId: 3, linkName: 'Lab 6', linkURL: 'lab6'},
    {linkId: 4, linkName: 'Graphs', linkURL: 'graphs'}

  ]
  constructor() { }

  ngOnInit(): void {
  }

}

然后在我的应用程序中-routing.module.ts，我创建了路由路径：


import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GraphsComponent } from './graphs/graphs.component';
import { Lab5Component } from './lab5/lab5.component';
import { MongodbComponent } from './mongodb/mongodb.component';
import { NbaStatsComponent } from './nba-stats/nba-stats.component';

const routes: Routes = [

  {path: 'home', component: NbaStatsComponent},
  {path: 'lab5', component: Lab5Component},
  {path: 'lab6', component: MongodbComponent},
  {path:'graphs', component: GraphsComponent}

];

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

导航栏正确显示，但当我单击不同的链接导航到该页面时，它显示“无法获取 /home”。我是否遗漏了路由中的任何其他步骤？

Answer 1

您没有遗漏任何一步，但您应该使用 routerLink directive instead of the href attribute 并且您的路线应以正斜杠开头。

使用 href，您的浏览器将尝试获取例如/home 不存在（localhost:4200/home 存在，因为 Angular 为您执行路由。项目根目录中没有静态 home.html 文件）。

将 routerLink 与 /home 一起使用，您的浏览器将停留在 localhost:4200 并且 Angular 会更改 <router-outlet> 到由 home 路径标识的组件。 Here's the routing tutorial for more.

而不是：

<a href="{{items.linkURL}}">{{items.linkName}}</a>

menuItems = [
    {linkId: 1, linkName: 'Search by Player', linkURL: 'home'},
    {linkId: 2, linkName: 'Lab 5', linkURL: 'lab5'},
    {linkId: 3, linkName: 'Lab 6', linkURL: 'lab6'},
    {linkId: 4, linkName: 'Graphs', linkURL: 'graphs'}
];

你想要：

<a [routerLink]="[items.linkURL]">{{items.linkName}}</a>

menuItems = [
    {linkId: 1, linkName: 'Search by Player', linkURL: '/home'},
    {linkId: 2, linkName: 'Lab 5', linkURL: '/lab5'},
    {linkId: 3, linkName: 'Lab 6', linkURL: '/lab6'},
    {linkId: 4, linkName: 'Graphs', linkURL: '/graphs'}
];

通过 Bootstrap 导航栏路由不同的 Angular 组件

Routing Different Angular Components through a Bootstrap Nav Bar

html

url-routing

navbar

angular