angular - タブが期待どおりに機能しない - Angular Material

Question

私は角度を学ぼうとしています。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 バーのタブが常に存在する必要があります。そのタブ ナビゲーション バーのすぐ下に、ページが読み込まれます。ここではそれは起こっていません。いつも戻るボタンをクリックしなければなりません。ここで何が欠けているか教えてください。