Angular 6 路由器重复 HTML

Question

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

我在 app.component.html 中有一个 mat-toolbar 组件，它显示网站的主要顶部导航栏。工具栏下方是<router-outlet></router-outlet>.
当用户导航到位于 localhost:4200/ 的根目录时，我希望顶部导航栏可见，并且导航栏中与 link 相关联的所有组件都呈现在顶部导航栏下方。
现在的问题是，当用户导航到根目录时，顶部导航栏重复了两次。单击 links，重复的导航栏被删除，适当的组件呈现在导航栏下（这是我想要的，没有重复）。

这是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>

以下是 home-top-navbar.component.html 的设置方式：

<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 中只有 <router-outlet></router-outlet>。但是，问题是当我单击 link 时，页面导航到更正的组件
顶部导航栏不再可见（这是预期的，因为其他组件不会重复导航栏代码）。

有什么方法可以在用户导航到根目录时不重复工具栏两次来实现这一点？如果顶级组件的每个页面上没有 copy/pasting 导航栏，是否可以做到这一点？

Answer 1

AppComponent 应该 而不是 成为你的 Routes 的一部分。这是因为，AppComponent 是您应用程序的入口点。在 index.html 中，您有类似 <rr-app></rr-app> 的内容。如果有一条路线导航到 AppComponent（路线 root），Angular 将在 router-content 内呈现 AppComponent，最终分为两个 navbar 仅此而已。

据我了解，您不需要路由 root。

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

/* 
 * 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}
];

Angular 6 路由器重复 HTML

Angular 6 Router Repeating HTML

angular

angular-router