Angular 4 -标题导航栏消失

Question

我在页面顶部有一个导航栏，其中包含一些路由链接。 在主页上可以看到标题导航栏。但是一旦我路由到另一个链接，标题导航栏就会消失。

我该如何解决这个问题？

• 请在下面找到导航栏的代码。它包括三个 路由链接。当我单击主页标题栏时，会看到。但是当我 点击它消失的其他链接。

Nav-bar.component.html-

<div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav" routerLinkActive="active">
    <li class="nav-item active">
      <a class="nav-link" [routerLink]="['/home']" matTooltip="Homepage!">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/table']" matTooltip="Information">Link1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/userinfo']" matTooltip="Userform">Link 2</a>
    </li>
    <li class="nav-item">
      <mat-form-field>
        <mat-select [(value)]="selected" >
          <mat-option value="option1" (click)="openSnackBar()">Option 1</mat-option>
          <mat-option value="option2" (click)="openSnackBar()">Option 2</mat-option>
          <mat-option value="option3" (click)="openSnackBar()">Option 3</mat-option>
        </mat-select>
      </mat-form-field>
    </li>
  </ul>
</nav>
</div>

这是我调用导航栏的主页

<app-nav-bar></app-nav-bar>

        <div class="col-md-12">
          <h1>Welcome to Clara</h1>
          <p class="alignp">Hello! {{name}}</p>
        </div>

1. 在 navbar.component.html 中的“表格”链接上，出现以下代码 但随后导航栏消失了

.

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>
  <mat-table #table [dataSource]="dataSource" matSort>

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef mat-sort-header> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]">

  </mat-paginator>
</div>

那么下面是app.routes.ts

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';
import {UserComponent} from "./user-component/user-component.component";
import {HomePageComponent} from "./home-page/home-page.component";
import {AppComponent} from "./app.component";
import {UserFormComponent} from "./user-form/user-form.component";
import {InfoPageComponent} from "./info-page/info-page.component";
import {AppTabsComponent} from "./app-tabs/app-tabs.component";
import { StepperComponent } from './stepper/stepper.component';
import {TableComponent} from "./table/table.component";

const appRoutes: Routes = [
  { path: '', redirectTo: 'app', pathMatch: 'full' },
  { path: 'main',component: AppComponent},
  { path: 'user', component: UserComponent },
  { path:'home', component: HomePageComponent},
  { path:'table', component: TableComponent},
  { path:'userinfo', component: StepperComponent},
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

Answer 1

我猜对了……！！有一个问题。

在您的HomeComponent 中，您调用NavBar + 一些HTML 内容，这非常好。现在，首先了解路由，一旦你加载任何组件，它的构造方法就会被调用并创建组件，这意味着组件被创建，它将显示在<router-outlet>，但是当你路由到其他组件时，Angular 会破坏前一个组件，然后创建一个正在被调用的新组件，并在<router-outlet> 中再次显示它。

所以您的代码是正确的，但是您放置 Navbar 的位置不正确。

要在您的应用程序的每个页面上获取Navbar，请将您的<app-nav-bar></app-nav-bar> 包含在您的应用程序组件中，就在<router-outlet> 标记上方。

这样做会创建NavbarComponent，但在应用运行之前永远不会破坏它。

希望这会有所帮助..!!