Angular маршрутизация работает только иногда

Question

Прямо сейчас у меня есть четыре компонента в моем проекте Angular: дом, портфолио, контакт и о. Находясь на домашней странице, я могу перейти к любому другому компоненту через панель навигации. Однако, когда я нахожусь на любой другой странице, я могу только перейти на домашнюю страницу.

Это изображение является примером того, когда я на любом компоненте, кроме домашней страницы. Он пытается перейти к ссылке около маршрутизатора в компоненте портфолио. Но, очевидно, этого не существует, потому что он находится в компоненте приложения.

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>

тогда это мой портфолио.component . html

Answer 1

Попробуйте добавить / в ваш routerLink записи, такие как routerLink = "/ about"