Sidenav和工具栏没有出现在角度4的新组件中

我想在我的角应用程序中使用mat工具栏和侧面导航 . 我有一个名为app-layout的组件，它有工具栏和侧面导航，这里是代码，

<div class="yaanapage">
  <mat-toolbar color="primary" class="toolbar">
  <button mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
  <span>YAANA-</span>
  </mat-toolbar>

  <mat-sidenav-container fullscreen  autosize style="top: 80px !important;">
    <mat-sidenav #sidenav mode="push" opened="false" class="sideNav">
      <mat-nav-list>
        <mat-list-item (click)="onDashboardClicked()">Dashboard</mat-list-item>
        <a><mat-list-item>Incidents</mat-list-item></a>
        <a><mat-list-item>Users</mat-list-item></a>
    </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content >
      <router-outlet></router-outlet>
  </mat-sidenav-content>
  </mat-sidenav-container>
  </div>

它显示工具栏和侧面导航，现在在侧面导航，我有不同的组件，即仪表板，用户等 . 现在，当我点击仪表板时，仪表板视图将被替换为 **** . 但事情并非如此，整个侧面导航和工具栏都没有显示，只显示仪表板视图 . 仪表板视图是，

<mat-form-field>
   <mat-select placeholder="Choose location" (change)="onChange($event)" (ngModel)="yaanaServiceLocations">
    <mat-option *ngFor="let location of yaanaServiceLocations" [value]="location">
      {{ location.areaName }}
    </mat-option>
   </mat-select>
  </mat-form-field>
    <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
        <agm-marker *ngFor="let marker of coordinates; let i = index" 
        [iconUrl]="icon" 
        [latitude]="marker.latitude" 
        [longitude]="marker.longitude"
        [markerClickable]="true"
        (markerClick)="markerClicked(marker.latitude,marker.longitude)">
        <agm-snazzy-info-window [closeWhenOthersOpen]="true" [maxHeight]="300" [maxWidth]="1400"
        [backgroundColor]="'orange'" [padding]="'20px'">
          <ng-template>
            <mat-card>{{ pLocationId }}  {{ pLocationName }}</mat-card>

              <mat-grid-list cols="12" rowHeight="100px" (ngModel)="pCycle">
                <mat-grid-tile [colspan]="4" [rowspan]="2" *ngFor="let cycle of pCycle; let i = index" [style.background]="orange"
                [style.padding-right]="'50px'" [style.background]="'white'">
                    <mat-grid-tile-header [style.height]="20">{{i+1}}</mat-grid-tile-header>
                  <div [style.background]="orange">
                    <i class="material-icons">motorcycle</i>
                    <span [style.color]="white" >{{cycle.qrCode}}</span>

                    

                    <i class="material-icons">battery_alert</i>
                    <span>{{ cycle.batteryLevel }}</span>

                  </div>
                  <mat-grid-tile-footer [style.background]="yellow">
                    <button mat-mini-fab (click)="showDirection(cycle.latitude, cycle.longitude)">
                      <mat-icon>navigation</mat-icon>
                    </button>
                  </mat-grid-tile-footer>
                </mat-grid-tile>
                </mat-grid-list>
          </ng-template>

        </agm-snazzy-info-window>
        <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination" [visible]="show"></agm-direction>
    </agm-marker>
    <div ng-show="showInfo" class="InfoWindow">
        <h2> I am InfoWindow</h2>
      </div>
    </agm-map>

路由模块具有以下代码，

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent},
  {
    path: 'applayout', component: AppLayoutComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false })],
  exports: [RouterModule]
})

app.component.html

<div [class]="theme">
  <router-outlet></router-outlet>
</div>

请更正我在新组件中同时显示工具栏和侧面导航 .