javascript - Angular Material 2 - 未在整页中渲染

Question

我正在使用Angular Material 2对于我的 Angular 2 应用程序。我的仪表板页面未在浏览器中呈现整页。附上上述问题的截图。

AppComponent - 模板文件:

<router-outlet></router-outlet>

DashboardComponent - 模板文件:

<md-sidenav-layout>
  <md-sidenav #sidenav mode="side" class="app-sidenav md-sidenav-over" (open)="list.focus()">
    <ul #list>
      <li> Item 1</li>
      <li> Item 2</li>
      <li> Item 3</li>
    </ul>
  </md-sidenav>

  <md-toolbar color="primary">
    <button class="app-icon-button" (click)="sidenav.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
    </button>
    <span class="margin-left10"> Angular Material2 Portal </span>
    <span class="app-toolbar-filler"></span>
    <button md-button router-active [routerLink]=" ['Index']">
      Index
    </button>
    <button md-button router-active [routerLink]=" ['Home']">
      {{ 'HOME.TITLE' | translate }}
    </button>
    <button md-button router-active [routerLink]=" ['About'] ">
      {{ 'ABOUT.TITLE' | translate }}
    </button>
  </md-toolbar>

  <div class="app-content">
    <md-card>
      Dashboard Content Goes Here..!!
    </md-card>
  </div>

  <footer>
    <span id="footerText">Dashboard Footer</span>
  </footer>
</md-sidenav-layout>

DashboardComponent.ts:

import {Component, Inject, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import {TranslatePipe} from 'ng2-translate/ng2-translate';

console.log('`Dashboard` component loaded asynchronously');

@Component({
  selector: 'dashboard',
  styles: [
    require('./dashboard.component.css')
  ],
  template: require('./dashboard.component.html'),
  pipes: [TranslatePipe]
})
export class Dashboard implements {
  elementRef:ElementRef;

  constructor(@Inject(ElementRef) elementRef:ElementRef) {
    this.elementRef = elementRef;
  }

  ngOnInit() {   
    console.log('hello `Dashboard` component');   
  }

}

我在这里遗漏了什么吗？

请引用: Screenshot of my half-page rendered dashboard page

感谢您的帮助。

Answer 1

您缺少 md-sidenav-layout 标记内的全屏属性。

此属性会将这些属性添加到 md-sidenav-layout:

[_nghost-oog-2][fullscreen] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

目前还没有很好的文档说明可以将这样的属性添加到 md-sidenav-layout 中，因为它仍处于 alpha 阶段。但是within这个preview在 ngconf，他们演示了您当前可以使用 Material 2 中的一些内容。