角度路由仅在某些时候有效答案

【问题标题】：Angular routing is only working sometimes角度路由仅在某些时候有效
【发布时间】：2020-06-01 14:56:55
【问题描述】：

现在我的 Angular 项目中有四个组件：主页、投资组合、联系人和关于。当我在主页上时，我可以通过导航栏导航到任何其他组件。但是，当我在任何其他页面上时，我只能导航到主页。

这张图片是我在主页以外的任何组件上时的示例。它正在尝试导航到投资组合组件中的 about router-link。但显然它不存在，因为它在 app-component 中。

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

import { HomeComponent } from './home/home.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '' , component: HomeComponent },
  { path: 'portfolio', component: PortfolioComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

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

这是我的 app-routing.module.ts

            <nav class="navbar navbar-expand navbar-trans">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img height="250" src="assets/Kaan-Logo-PNG.png" alt="logo">
                </a>
                <div class="pull-xs-right justify-content-end" id="navbarToggler-1">
                    <ul class="nav navbar-nav mt-2 mt-md-0">
                        <li class="nav-item active">
                            <a class="nav-link" routerLink="">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

那么这是我的portfolio.component.html

【问题讨论】：

你能在导航不工作的地方发布你的路线和一些 HTML
看不到代码时很难调试。
好吧，我想我添加了你需要的东西
你的路由链接应该以斜线开头routerLink="/portfolio"
@Hareesh 谢谢你，我为此苦苦挣扎了一段时间，效果很好

标签： javascript html css angular typescript

【解决方案1】：

像这样更新portfolio.component.html。

<nav class="navbar navbar-expand navbar-trans">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img height="250" src="assets/Kaan-Logo-PNG.png" alt="logo">
                </a>
                <div class="pull-xs-right justify-content-end" id="navbarToggler-1">
                    <ul class="nav navbar-nav mt-2 mt-md-0">
                        <li class="nav-item active">
                            <a class="nav-link" routerLink="/">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="/portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="/about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLink="/contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

【讨论】：

【解决方案2】：

尝试将 / 添加到您的 routerLink 条目中，例如 routerLink="/about"

【讨论】：