Angular 6 路由器重复 HTML

Question

我正在尝试实现以下目标：

1. 我在app.component.html中有一个mat-toolbar组件，用于显示网站的主顶部导航栏。工具栏下方是<router-outlet></router-outlet>.
2. 当用户导航到根目录时localhost:4200/我希望顶部导航栏可见，并且与导航栏中的链接关联的所有组件都呈现在顶部导航栏下。
3. 现在的问题是，当用户导航到根目录时，顶部导航栏重复两次。单击链接，将删除重复的导航栏，并在导航栏下呈现正确的组件(这是我在没有重复的情况下想要的(。

这是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}在哪里，我尝试单独加载工具栏，并且只有<router-outlet></router-outlet>app.component.html.但是，问题是当我单击链接时，页面导航到更正的组件，
顶部导航栏不再可见(这是意料之中的，因为其他组件没有重复导航栏代码(。

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

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