Question

我使用角度为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也无效。目前它使用下面给出的代码。它正在使用该服务打开子区域，但我无法在打开时看到背景。

这是我的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>

这是我的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);
  }
}

这是我的服务。

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();
  }

}

这是我的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>

这是我的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();
  }

}

Answer 1

目前不支持在自定义组件中包装<mat-sidenav>或\p{L}。有关详细信息，请参阅https://github.com/angular/material2/issues/9438#issuecomment-358370971。

从另一个组件

1 个答案: