typescript - các tab mat-tab-nav-bar không hiển thị

Khi sử dụng mat-tab-nav-bar từ Angular Material, các tab không hiển thị trên SPA Angular 6.

Đây là mã:

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

Trong forms.component.html, khi tôi chỉ định các navLinks riêng lẻ như dưới đây, các tab hiển thị. Tuy nhiên, khi tôi nhấp vào tab app-names và đi đến component, các tab biến mất.

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

Vậy có hai vấn đề:

1. Tôi không thể sử dụng navLinks trong *ngFor.
2. Khi chỉ định tên các tab riêng lẻ, các tab biến mất sau khi tôi nhấp vào một trong số chúng và chuyển đến thành phần.

Cảm ơn vì đã giúp đỡ!

Câu trả lời #1

1. navLinks trong forms.component

Để có thể truy cập navLinks trong forms.component.html, bạn cần đặt chúng trong forms.component.ts.

Tôi không thấy nó ở đó trong thành phần hiện tại của bạn. Các tuyến đường (trong cấu hình tuyến đường của bạn) là một chuyện - các liên kết là chuyện khác. Mẫu của bạn (html) chỉ có thể truy cập html.

2. Thanh điều hướng biến mất

Cấu hình định tuyến của bạn khác với những gì bạn muốn. Khi bạn nhìn vào các liên kết điều hướng - chúng nằm trong thành phần forms của bạn. Sau đó bạn nhấp vào một liên kết - và bạn chuyển hướng sang, tới một thành phần khác. Nếu bạn muốn các thành phần khác này là các thành phần con, bạn cũng cần điều chỉnh cấu hình tuyến đường như vậy:

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

Bây giờ các thành phần của bạn sẽ được hiển thị trong router-outlet lồng nhau đó - không phải trong router-outlet chính của ứng dụng.