Question

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

我该如何解决这个问题？

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

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>

这是我称之为Nav-Bar的主页

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

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

在navbar.component.html的“table”链接中，出现以下代码但是在这里导航栏消失了

<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，但在应用程序运行之前不会销毁它。

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

Angular 4 -Header Nav Bar消失

1 个答案: