通过Bootstrap Nav栏路由不同的角度组件

Question

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

首先，我为此NAV栏创建了一个名为Header的组件，并为NAV栏编写了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 {
  }

}

然后在我的HTML代码中 ： app-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 { }

导航栏出现正确，但是当我单击不同的链接以导航到该页面时，它说“无法获得 /回家”。我是否错过了路由中的其他任何步骤？

Answer 1

您不会错过一步，但是您应该使用 routerlink routerlink 指令< /a>而不是 href属性，您的路线应从前向斜杠开始。

使用HREF，您的浏览器将尝试获取不存在的EG /home（localhost：4200/home存在，因为Angular执行路由对于您，您的项目根部没有静态 home.html 文件）。

使用routerlink与/home，您的浏览器始于localhost：4200和 angular 更改＆lt; router-outlet＆gt; to home路径确定的组件。 这是更多的路由教程。

而不是：

<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'}
];