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>

forms-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中，当我单独指定navLinks时，如以下标签所示。但是，当我单击“应用程序名称”选项卡并转到组件时，这些选项卡消失了。

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

所以有两个问题：

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

感谢您的帮助！

Answer 1

forms.component中的navLinks

要访问forms.component.html中的navLink，您需要将其放在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标签未显示

1 个答案: