Angular路由使用了适当的文件夹结构，但仍然有一些组件加载在其他组件的下面

Question

我正在尝试构建一个购物应用程序，但我面临的问题是，虽然Angular路由使用适当的文件夹结构，但仍然有一些组件加载低于其他组件。下面是我的文件夹/组件结构:

https://i.stack.imgur.com/SMc61.png

在app文件夹中，我有MyComponents文件夹，在它里面，我有3个主要组件:主页，登录和注册。在这3个组件中，我在每个组件中都有几个其他组件。

app.component.html内容为:

<app-homepage></app-homepage>
<router-outlet></router-outlet>

home .component.html内容为:

<app-navbar></app-navbar>
<app-about-us></app-about-us>
<app-workitems></app-workitems>
<app-contact-us></app-contact-us>

在导航栏组件中，我有要呈现的组件的所有链接。Navbar.component.html是:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Shopping Application</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav" style="font-weight: bolder;">
<li class="nav-item mx-5">
<a class="nav-link" routerLink="aboutUs">About the Owner</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="contactUs">Contact Us</a>
</li>
</ul>
<div class="container-inline my-2 my-lg-0" style="margin-left: auto;  margin-right: 1rem;">
<a class="btn btn-primary mx-2 my-2 my-sm-0" routerLink="register" type="button">Sign Up</a>
<a class="btn btn-success mx-2 my-2 my-sm-0" routerLink="login" type="button">Login</a>
</div>
</div>
</nav>

其他成分也是如此。主页组件是渲染好的开始，但当我点击关于我们或联系我们或登录或注册链接，它呈现有组件，但低于主页组件，但我希望这些组件从顶部打开(主页组件被删除，新组件显示)，这是不发生的。有人能帮忙吗?

下面我还添加了app-routing.module。文件内容:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutUsComponent } from './MyComponents/homepage/about-us/about-us.component';
import { ContactUsComponent } from './MyComponents/homepage/contact-us/contact-us.component';
import { HomepageComponent } from './MyComponents/homepage/homepage.component';
import { NavbarComponent } from './MyComponents/homepage/navbar/navbar.component';
import { LoginComponent } from './MyComponents/login/login.component';
import { OrdersComponent } from './MyComponents/login/orders/orders.component';
import { ProfileComponent } from './MyComponents/login/profile/profile.component';
import { WorkitemsComponent } from './MyComponents/login/workitems/workitems.component';
import { RegisterComponent } from './MyComponents/register/register.component';
const routes: Routes = [
{
path:"homepage",
component: HomepageComponent
},
{
path:"login",
component: LoginComponent
},
{
path:"register",
component: RegisterComponent
},
{
path:"aboutUs",
component: AboutUsComponent
},
{
path:"contactUs",
component: ContactUsComponent
},
{
path:"navbar",
component: NavbarComponent
},
{
path:"cart",
component: LoginComponent
},
{
path:"orders",
component: OrdersComponent
},
{
path:"profile",
component: ProfileComponent
},
{
path:"workitems",
component: WorkitemsComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

后,我找到了答案探索一次又一次的代码。实际上错误在app-routing.module中。ts文件。在这里，我知道我没有配置任何组件时，使用默认url(http://localhost:4200)，我也在app.component中填充了一些组件，这些组件也将被附加在每个页面的顶部。现在我已经在app-routing.module中为默认url配置了一个路径。文件如下:

{
path:"",
component: HomepageComponent
}

我也让app。component。html为空它只有router outlet标签:

<router-outlet></router-outlet>

现在一切正常