mat-tab-nav-bar 标签没有显示

Question

使用 Angular Material 中的 mat-tab-nav-bar 时，选项卡不会出现在 Angular 6 SPA 上。

代码如下：

forms.component.html:

<nav mat-tab-nav-bar>
  <a mat-tab-link
    *ngFor="let link of [navLinks]"
    [routerLink]="[link.path]"
    routerLinkActive #rla="routerLinkActive"
    [active]="rla.isActive">
    {{link}}
  </a>
</nav>
<router-outlet></router-outlet>

表格-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NamesComponent } from './names/names.component';
import { FileNameListComponent } from './file-name-list/file-name-list.component';

const navLinks: Routes = [
    {path: 'app-names', component: NamesComponent},
    {path: 'app-file-name-list', component: FileNameListComponent},
    {path: '**', redirectTo: 'app-names'}
  ];

  @NgModule({
    imports: [RouterModule.forRoot(navLinks)],
    exports: [
      RouterModule
    ]
  })

export class FormsRoutingModule {

}

forms.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.css']
})
export class FormsComponent  {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, 
  MatButtonModule, 
  MatSidenavModule, 
  MatIconModule, 
  MatListModule, 
  MatTabsModule 
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsComponent } from './forms/forms.component';
import { RoutingModule } from './routing.module';
import { ReportsComponent } from './reports/reports.component';
import { NamesComponent } from './names/names.component';
import { FileNameListComponent } from './file-name-list/file-name-list.component';
import { FormsRoutingModule } from './forms-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent,
    FormsComponent,
    ReportsComponent,
    NamesComponent,
    FileNameListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatTabsModule,
    BrowserAnimationsModule,
    RoutingModule,
    FormsRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 forms.component.html 中，当我如下所示单独指定 navLink 时，选项卡确实会显示。但是，当我单击应用程序名称选项卡并转到组件时，选项卡消失了。

*ngFor="let link of ['app-names','app-file-name-list']

所以有两个问题：

我不能在 *ngFor 中使用 navLinks。
单独指定选项卡名称时，单击其中一个选项卡并转到组件后选项卡消失。

感谢您的帮助！

Answer 1

forms.component

为了能够访问 forms.component.html 中的导航链接，您需要将它们放入 forms.component.ts。

我在您当前的组件中没有看到它。路线（在你的路线配置中）是一回事 - 链接是另一回事。您的模板 (html) 只能访问 html.

正在消失的导航

您的路由配置与您想要的不同。当您查看导航链接时，它们位于您的表单组件中。然后单击一个 - 然后 导航离开，转到另一个组件。如果您希望这些其他组件成为 子组件 ，您也需要像这样调整路由配置：

const navLinks: Routes = [
  {
    path: 'app-names',
    component: NamesComponent, 
    children: [
      { path: 'app-file-name-list', component: FileNameListComponent, },
      { path: '**', redirectTo: 'app-names' },
    ],
  }
];

现在您的组件将呈现在嵌套路由器插座中 - 而不是应用程序的主要部分。

mat-tab-nav-bar 标签没有显示

mat-tab-nav-bar tabs not showing up

typescript

angular6

angular-material-6

mat-tab