当从另一个组件移动时，材料sidenav不显示背景

我使用角度为5的角度材料2 .

我想要实现的是，在手机和平板电脑上，我想要一个像bootstrap一样的汉堡包菜单 . 因为我正在使用角材料sidenav . 我想点击它时有一个按钮，它显示sidenav .

现在我把这个按钮触发了我的 app.component.html 中的sidenav切换 . 我在共享文件夹中创建了另一个名为 nav-mobile.component.html 的组件 . 在这个组件中，我将把所有将显示在菜单中的HTML .

所以，根据文档，它应该是这样的 .

<mat-drawer-container>
  <mat-drawer #sidenav>
    asdasdasdas
  </mat-drawer>
  <mat-drawer-content>
    <button mat-button (click)="sidenav.toggle()">
      <i class="material-icons">menu</i> Menu
    </button>
    all other pages and related contents
  </mat-drawer-content>
</mat-drawer-container>

在我的情况下是 <app-nav-mobile></app-nav-mobile> 另一个组件而不是

<mat-drawer #sidenav>
   asdasdasdas
</mat-drawer>

现在的实际问题是，当我将代码移动到 nav-mobile 组件并使用服务切换时，我无法看到隐藏剩余屏幕的背景或覆盖图 .

请注意，我也尝试了 mat-sidenav 而不是 mat-drawer . 当我将它移动到子组件时，mat-drawer-content也无效 . 目前它使用下面给出的代码 . 它正在使用该服务打开子区域，但我无法在打开时看到背景 .

This is my app.component.html

<mat-drawer-container>
  <!--This has to show the backdrop/overlay-->
  <app-nav-mobile></app-nav-mobile>

    <div class="hamburger" fxHide.gt-md="true">
      <mat-toolbar>
        <button mat-button (click)="toggleMobileSidenav()">
          <i class="material-icons">menu</i> Menu
        </button>
      </mat-toolbar>
    </div>
    <app-home></app-home>

</mat-drawer-container>

this is my app.component.ts

import { Component, ViewChild, OnInit } from '@angular/core';
import { SidenavService } from './services/sidenav.service';
import { NavMobileComponent } from './shared/nav-mobile/nav-mobile.component';
import { MatSidenav } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  @ViewChild('sidenav') public sidenav: MatSidenav;


  constructor(private sidenavService: SidenavService) {
  }

    toggleMobileSidenav() {
      this.sidenavService.toggle();
    }
  ngOnInit(): void {
    //  this.sidenavService.setSidenav(this.sidenav);
  }
}

This is my service.

import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { NavMobileComponent } from '../shared/nav-mobile/nav-mobile.component';

@Injectable()
export class SidenavService {

  private sidenav: MatSidenav;

  public setSidenav(sidenav: MatSidenav) {
    this.sidenav = sidenav;
  }

  public open() {
    return this.sidenav.open();
  }

  public close() {
    return this.sidenav.close();
  }

  public toggle(): void {
    this.sidenav.toggle();
  }

}

this is my nav-mobile HTML.

<mat-drawer #sidenav>
  <div fxLayout="column">
    <button mat-button class="mobile-nav-link back-btn" (click)="close()">
      <i class="material-icons">keyboard_arrow_left</i> Back
    </button>
    <button mat-button class="mobile-nav-link">
      Deals
    </button>
  </div>
  <mat-accordion>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Personal data
        </mat-panel-title>
      </mat-expansion-panel-header>
      <a mat-button routerLink=".">Link</a>
      <a mat-button routerLink=".">Link</a>
      <a mat-button routerLink=".">Link</a>
      <a mat-button routerLink=".">Link</a>
      <a mat-button routerLink=".">Link</a>
      <a mat-button routerLink=".">Link</a>
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Self aware panel
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div fxLayout="column">
        <a mat-button class="mobile-nav-link" routerLink=".">Link This</a>
        <a mat-button class="mobile-nav-link" routerLink=".">Dry Fruits</a>
        <a mat-button class="mobile-nav-link" routerLink=".">Peshawari Chappal</a>
      </div>
    </mat-expansion-panel>
  </mat-accordion>

</mat-drawer>

this is my nav-mobile.ts.

import { Component, OnInit,ViewChild } from '@angular/core';
import { SidenavService } from '../../services/sidenav.service';
import { MatSidenav } from '@angular/material';

@Component({
  selector: 'app-nav-mobile',
  templateUrl: './nav-mobile.component.html',
  styleUrls: ['./nav-mobile.component.css']
})
export class NavMobileComponent implements OnInit {
  @ViewChild('sidenav') public sidenav: MatSidenav;

  constructor(private sidenavService: SidenavService) { }

  ngOnInit(): void {
   // console.log(this.sidenav);
    this.sidenavService.setSidenav(this.sidenav);
  }

  public close() {
    return this.sidenavService.close();
  }

}