Angular 6 Router重复HTML [英] Angular 6 Router Repeating HTML

问题描述

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

I am trying to achieve the following:

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

1. I have a mat-toolbar component in app.component.html that displays the main top navbar of the site. Below the toolbar is <router-outlet></router-outlet>.
2. When a user navigates to the root at localhost:4200/ I want the top navbar to be visible and the all components associated with links in the navbar to be rendered under the top navbar.
3. The problem now is that the top navbar is repeated twice when the user navigates to the root. Clicking the links, the repeated navbar is removed and the proper component is rendered under the navbar (which is what I desire without the repeat).

这是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>.但是，问题是当我单击链接时，页面导航到更正的组件，
顶部导航栏不再可见(这是预期的，因为其他组件不会重复导航栏代码).

Now if you notice that there is commented out path, {path: 'home', component: HomeComponent} where, I tried loading the toolbar separately and have only <router-outlet></router-outlet> in app.component.html. However, the problem is when I click a link, the page navigates to the corrected component,
the top navbar is no longer visible (which is expected since, other components are not repeating the navbar code).

在用户导航到根目录时，是否有任何方法可以在不重复两次工具栏的情况下实现?是否可以在不复制/粘贴顶层组件的每个页面上的导航栏的情况下完成此操作?

Is there any way to achieve this without repeating the toolbar twice when a user navigates to the root? Can this be done without copy/pasting the navbar on every page for top level components?

推荐答案

AppComponent应该不成为您的Routes的一部分.这是因为AppComponent是应用程序的入口点.在index.html中，您有类似<rr-app></rr-app>的内容.如果有一条导航到AppComponent的路线(路线root)，Angular将在router-content内渲染AppComponent，最终以两个navbar结束，而没有其他内容.

AppComponent should not be part of your Routes. It is because, AppComponent is the entry point of your app. In index.html, you have something like <rr-app></rr-app>. If there is a route which navigates to AppComponent (the route root), Angular will render AppComponent within router-content which ends up in two navbar and nothing else.

据我了解，您不需要路线root.

From my understanding, you do not need a route root.

将您的路由配置更改为以下.

Change your routing config to following.

/* 
 * 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 Router重复HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！