Tab 未按预期方式工作 -Angular Material

Question

我只是想学习 angular。我正在使用 angular 8 并且 material latest.I 正在分享我的 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 栏标签应该一直存在。在该选项卡导航栏的正下方，页面应该被加载。这里没有发生。一直以来，我都必须单击后退按钮。谁能告诉我我在这里缺少什么。

Answer 1

您需要为 'dashboard' 路径指定子路由。因此，您的应用程序将加载 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'}
   ];

Tab 未按预期方式工作 -Angular Material

Tab is not working in the expected way -Angular Material

nav

angular-material

angular

mat-tab