Angular material2 sidenav尽管在dom中没有显示

Question

我有一个问题，sidenav和header是共享服务的不同组件。这在检查sidenav元素时似乎正在工作，我可以看到切换打开和关闭。我遇到的问题是没有sidenav实际出现。

组件文件：

import { Component, OnInit, ViewChild } from '@angular/core';

import { MdSidenav } from '@angular/material';

import { SidenavToggleService } from './shared/sidenavToggle.service';

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

  /**
   * Constructor of the class.
   * @param {sidenavService} SidenavToggleService
   */
  constructor(public sidenavService: SidenavToggleService) {}

  /**
   * OnInit life cycle hook
   */
  public ngOnInit(): void {
    this.sidenavService.setSidenav(this.sidenav);
  }

}

html文件：

<md-sidenav-container>
  <md-sidenav #sidenav mode="over">
testerer
  </md-sidenav>
</md-sidenav-container>

服务文件：

import { Injectable } from '@angular/core';
import { MdSidenav, MdSidenavToggleResult } from '@angular/material';

@Injectable()
export class SidenavToggleService {
  private sidenav: MdSidenav;

  /**
   * Setter for sidenav.
   *
   * @param {MdSidenav} sidenav
   */
  public setSidenav(sidenav: MdSidenav) {
    this.sidenav = sidenav;
  }

  /**
   * Open this sidenav, and return a Promise that will resolve when it's fully opened (or get rejected if it didn't).
   *
   * @returns Promise<MdSidenavToggleResult>
   */
  public open(): Promise<MdSidenavToggleResult> {
    return this.sidenav.open();
  }

  /**
   * Close this sidenav, and return a Promise that will resolve when it's fully closed (or get rejected if it didn't).
   *
   * @returns Promise<MdSidenavToggleResult>
   */
  public close(): Promise<MdSidenavToggleResult> {
    return this.sidenav.close();
  }

  /**
   * Toggle this sidenav. This is equivalent to calling open() when it's already opened, or close() when it's closed.
   *
   * @param {boolean} isOpen  Whether the sidenav should be open.
   *
   * @returns {Promise<MdSidenavToggleResult>}
   */
  public toggle(isOpen?: boolean): Promise<MdSidenavToggleResult> {
    console.log('uh');
    return this.sidenav.toggle(isOpen);
  }
}

编辑：添加了我正在使用的服务

Answer 1

我不得不将工具栏组件包装在sidenav-container中......

<div >
  <md-sidenav-container>
  <app-header></app-header>
  <app-sidenav></app-sidenav>
  </md-sidenav-container>
  test
</div>

为什么我必须这样做我不知道但它现在有效。我现在要处理职位等问题。

Answer 2

请在sidenav中设置fixedInViewport，将修复问题

<md-sidenav #sidenav mode="over" [fixedInViewport]="true" >
  <!-- content -->
</md-sidenav>