Angular 角度6路由器重复HTML

我正在努力实现以下目标：

我在

app.component.html

中有一个

mat工具栏

组件，它显示站点的主顶部导航栏。工具栏下方是

当用户在

localhost:4200/

处导航到根目录时，我希望顶部导航栏可见，并且与导航栏中链接相关的所有组件都显示在顶部导航栏下

现在的问题是，当用户导航到根目录时，顶部导航栏会重复两次。单击链接，删除重复的导航栏，并在导航栏下渲染适当的组件（这是我不需要重复的愿望） 这是

app.module.ts

// initialization and module imports
const RootRoutes: Routes = [
 {path: "", redirectTo: "root", pathMatch: "full"},
 {path: "root", component: AppComponent, },
 //{path: "home", component: HomeComponent },
 {path: "fiction", component: FictionDisplayComponent },
 {path: "nonfiction", component: NonFictionDisplayComponent},
 {path: 'poetry', component: PoetryDisplayComponent},
 {path: 'journal', component: JournalDisplayComponent},
 {path: 'letters', component: PersonalLetterDisplayComponent},
 {path: 'jokes', component: JokesDisplayComponent}
];
// NgModule declaration

下面是如何设置

app.component.html

：

<div class="pure-g rr-main-wrapper">
    <div class="pure-u-5-5 home-top-navbar-wrapper">
        <rr-home-top-navbar></rr-home-top-navbar>
    </div>

</div> 
<router-outlet></router-outlet>

<mat-toolbar color="primary" class="home-top-nav">
  <mat-toolbar-row>
    <img src="./../../assets/imgs/logo2.png" width="200" height="50">
    <mat-nav-list class="home-top-nav">
      <mat-list-item *ngFor="let route of navbarRoutes">
        <a [routerLink]="[route.url]" class="navbar-link">{{ route.name }}</a>
      </mat-list-item>
    </mat-nav-list>
  </mat-toolbar-row>

现在，如果您注意到有注释掉的路径，

{path:'home'，component:HomeComponent}

其中，我尝试单独加载工具栏，并且在

app.component.html

中只有

。但是，问题是当我单击一个链接时，页面会导航到正确的组件，
顶部导航栏不再可见（这是预期的，因为其他组件没有重复导航栏代码）

---

当用户导航到根目录时，有没有办法在不重复工具栏两次的情况下实现这一点？对于顶级组件，无需在每页上复制/粘贴导航栏即可完成此操作吗？

AppComponent

应该而不是

路由的一部分。这是因为，
AppComponent
是应用程序的入口点。在
index.html
中，有类似于
的内容。如果有一条路径导航到
AppComponent
（路径
root
），Angular将在
router content
中呈现
AppComponent
，其结果是两个
navbar
，而不是其他内容

据我所知，您不需要路由
根目录

将路由配置更改为以下内容

/* 
 * Removed AppComponent and redirected "/" to "home"
 */
const RootRoutes: Routes = [
 {path: "", redirectTo: "home", pathMatch: "full"},
 {path: "home", component: HomeComponent },
 {path: "fiction", component: FictionDisplayComponent },
 {path: "nonfiction", component: NonFictionDisplayComponent},
 {path: 'poetry', component: PoetryDisplayComponent},
 {path: 'journal', component: JournalDisplayComponent},
 {path: 'letters', component: PersonalLetterDisplayComponent},
 {path: 'jokes', component: JokesDisplayComponent}
];

接得好！路由不是通常在一个单独的常量路由文件中吗？“我觉得有点不一样。”BunyaminCoskuner如预期般工作。谢谢您的快速回复。从@Benyamin在其回答中提到的关于错误路线的内容来看，您是否有
批准模块
？@mittenspair下面由bunyamicoskuner提供的解决方案实际上解决了问题。谢谢你的回复。不用担心。太棒了，你的问题这么快就解决了！重复的，此重复标题问题是重复标题的重复。你收到我的复制件了吗@mittenspair我之前确实看过那篇文章。仍然想用一个单独的问题来澄清。