Angular 6 路由器重复 HTML [英] Angular 6 Router Repeating HTML

问题描述

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

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

这是app.module.ts

//初始化和模块导入const RootRoutes: 路由 = [{path: "", redirectTo: "root", pathMatch: "full"},{path: "root", 组件: AppComponent, },//{path: "home", 组件: HomeComponent },{path: "fiction", 组件: FictionDisplayComponent },{path: "nonfiction", 组件: NonFictionDisplayComponent},{path: 'poetry', 组件: PoetryDisplayComponent},{path: 'journal', 组件: JournalDisplayComponent},{path: 'letters', 组件: PersonalLetterDisplayComponent},{路径:'笑话'，组件:Jok​​esDisplayComponent}];//NgModule 声明

以下是 app.component.html 的设置方法:

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

<路由器插座></路由器插座>

以下是 home-top-navbar.component.html 的设置方法:

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

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

解决方案

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

据我所知，您不需要路由 root.

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

/** 删除了 AppComponent 并将/"重定向到home"*/const RootRoutes: 路由 = [{path: "", redirectTo: "home", pathMatch: "full"},{path: "home", 组件: HomeComponent },{path: "fiction", 组件: FictionDisplayComponent },{path: "nonfiction", 组件: NonFictionDisplayComponent},{path: 'poetry', 组件: PoetryDisplayComponent},{path: 'journal', 组件: JournalDisplayComponent},{path: 'letters', 组件: PersonalLetterDisplayComponent},{路径:'笑话'，组件:Jok​​esDisplayComponent}];

I am trying to achieve the following:

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).

Here is the 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

Here is how app.component.html is setup:

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

Here is how home-top-navbar.component.html is setup:

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

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 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.

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