3

使用 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 中，当我单独指定 navLinks 时，选项卡会显示如下。但是，当我单击应用程序名称选项卡并转到组件时，选项卡会消失。

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

所以有两个问题：

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

谢谢您的帮助！

4

1 回答 1

1
  1. forms.component 中的导航链接

为了能够访问 navLinks forms.component.html，您需要将它们放入forms.component.ts.

I don'T see it there in your current component. Routes (in your route config) are one thing - links are another. Your template (html) can only access the html.

  1. Dissapearing navigation

Your routing configuration is different from what you want. When you look at nav links -they're in your forms component. Then you click one - and you navigate away, to another component. If you want these other components to be child components, you need to adjust route config like that too:

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

Now your components will render in that nested router-outlet - not in the main one of the app.

于 2018-12-17T09:13:57.137 回答