Вкладка не работает ожидаемым образом - Angular Материал - PullRequest
Новая
       50

Вкладка не работает ожидаемым образом - Angular Материал

1 голос
/ 26 апреля 2020

Я просто пытаюсь выучить angular. Я использую angular 8 и последний материал. Я делюсь своими dashboard.components. html 

<div><nav mat-tab-nav-bar>
    <a mat-tab-link [routerLink]="['/home']">Home</a>
    <a mat-tab-link [routerLink]="['/admin']">Admin</a>
    <a mat-tab-link [routerLink]="['/order']">Orders</a>
    </nav></div>
  <div><router-outlet></router-outlet></div>

AppRoutingModule.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { HomeComponent} from './components/home/home.component';
import { AdminComponent} from './components/admin/admin.component';
import { OrdersComponent} from './components/orders/orders.component';


const routes: Routes = [
  {path: 'dashboard', component: DashboardComponent 
  {path: 'home', component: HomeComponent},
  {path: 'admin', component: AdminComponent},
  {path: 'order', component: OrdersComponent},
  {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Проблема в том, что когда я нажимаю на вкладку, страница загружается, но экран вкладок исчезает. Я хочу, чтобы вкладка Nab Bar присутствовала там постоянно. Чуть ниже панели навигации этой вкладки страница должна быть загружена. Здесь этого не происходит. Мне все время приходится нажимать кнопку назад. Кто-нибудь может сказать мне, что мне здесь не хватает.

1 Ответ

1 голос
/ 26 апреля 2020

Вам необходимо указать дочерние маршруты для пути к панели инструментов. Итак, ваше приложение будет загружать DashboardComponent (с содержимым вкладок) и router-outlet (выбранный дочерний элемент) 

   const routes: Routes = [
      {path: 'dashboard', component: DashboardComponent 
        children: [
         {path: 'home', component: HomeComponent},
         {path: 'admin', component: AdminComponent},
         {path: 'order', component: OrdersComponent}
        ]
      },
      {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
   ];
...