路由器插座未出现在导航栏模块下方

Question

我正在尝试使用 Angular 创建一个网站。我已经完成了导航栏，但是当我尝试添加下一个模块时，它没有出现在导航栏模块下。

app.component.html 看起来像这样：

<app-navbar></app-navbar>
<router-outlet></router-outlet>

我的 homepage.component.html 看起来像这样：

<h2>homepage component works!!</h2>

应用程序路由.component.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomepageComponent } from './pages/homepage/homepage.component';

const routes: Routes = [{
  path: 'home',
  component: HomepageComponent
},
{
  path: '',
  redirectTo: 'home',
  pathMatch: 'full'
}];

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

但是，当我运行代码时，我的主页组件似乎出现在导航栏后面而不是下面。可能是什么问题，我该如何解决这个问题？

我正在尝试为产品创建主页，但主页没有出现在导航栏下方。相反，它出现在导航栏后面。

Answer 1

根据您的解释，页面上显示了

<router-outlet>

does的内容；尽管在错误的地方。所以，这不是 Angular 问题；更不用说 Angular 路由了。从你的屏幕截图来看，你应用了一些 CSS。 下一步是关闭所有 CSS 并确认您在导航栏内容下获得了主页组件 HTML。如果你明白了，那么就开始分析 home 组件的 CSS。如果您有 CSS

inside

Home 组件 - 将其删除。如果您有疑问，可能值得用 CSS 标记它。