Angular 7 不会路由到新页面，但组件只是显示在上一个组件下

Question

我正在尝试有一个导航栏，当您单击其中一个小节时，它会将您导航到新页面。截至目前，当您单击导航中的小节之一时，该组件仅显示在主页上的现有组件下。

这是我的应用程序组件.html

<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" routerLink="#"><img class="navBarLogo" src="../../assets/whitelogo.png"></a>
<div class="navItemList">
<a class="navbar navItem" routerLink="/about">Home</a>
<a class="navbar navItem" routerLink="/about">About</a>
<a class="navbar navItem" routerLink="/about">Scheduling</a>
<a class="navbar navItem" routerLink="/about">Services</a>
</div>
</nav>
<router-outlet></router-outlet>
<app-home></app-home>

这是我的应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component'
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{path: 'home', component: HomeComponent },
{path: 'about', component: AboutComponent}
];
@NgModule({
imports: [CommonModule,
RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

例如，我想在从标题中单击"关于"时在页面上显示 AboutComponent。但是，当您立即单击"关于"时，会发生什么情况，它会显示主页组件，并在该组件下显示关于组件。

Answer 1

在<router-outlet></router-outlet>中，相应的响应路由及其各自的组件被渲染。

因此，请执行以下操作：

• 从 app.component 中删除<app-home></app-home>.html

• 像这样更改路由，以便在应用程序启动时(即没有路由(指向 HomeComponent

  const routes: Routes = [
  {path: '', component: HomeComponent },
  {path: 'home', component: HomeComponent },
  {path: 'about', component: AboutComponent}
  ];
  

• 在导航列表中，像这样修改主页：<a class="navbar navItem" routerLink="/home">Home</a>

Answer 2

您需要从 app.component.html 中删除<app-home></app-home>。 并将路由器链接更改为主页按钮的<a class="navbar navItem" routerLink="/home">Home</a>。

然后你需要为root/no路径添加一个路径;或者，你可以在末尾添加一个catch-all，以便在没有路由时捕获所有路由;但要小心，因为顺序很重要，所以它需要排在最后：

const routes: Routes = [
{path: '', component: HomeComponent },
{path: 'home', component: HomeComponent },
{path: 'about', component: AboutComponent},
{path: '**', component: HomeComponent },
];

Answer 3

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component'
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{path: ' ', component: HomeComponent },
{path: 'home', component: HomeComponent },
{path: 'about', component: AboutComponent}
];
@NgModule({
imports: [CommonModule,
RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
//-------------------------------------------
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" routerLink="#"><img class="navBarLogo" src="../../assets/whitelogo.png"></a>
<div class="navItemList">
<a class="navbar navItem" [routerLink]="['home']">Home</a>
<a class="navbar navItem" [routerLink]="['about']">About</a>
<a class="navbar navItem" [routerLink]="['scheduling']">Scheduling</a>
<a class="navbar navItem" [routerLink]="['Services']">Services</a>
</div>
</nav>
<router-outlet></router-outlet>
<app-home></app-home>