вкладки mat-tab-nav-bar не отображаются - PullRequest
Новая
       25

вкладки mat-tab-nav-bar не отображаются

0 голосов
/ 14 декабря 2018

При использовании mat-tab-nav-bar из Angular Material вкладки не отображаются в 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 {

}

форм.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']

Таким образом, возникают две проблемы:

  1. Я не могу использоватьnavLinks в * ngFor.
  2. При индивидуальном указании имен вкладок вкладки исчезают после нажатия на одну из них и перехода к компоненту.

Спасибо за помощь!

1 Ответ

0 голосов
/ 17 декабря 2018
  1. navLinks в forms.component

Чтобы получить доступ к navLinks в 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' },
    ],
  }
];

Теперь ваши компоненты будут отображаться в этом вложенном роутер-розетка - не в основном приложении.

...