Angular Material 2 - 未在整页中呈现

Question

我正在为我的 Angular 2 应用程序使用 Angular Material 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 this preview 在 ngconf 他们展示了一些你目前可以从 Material 2.

中使用的东西

Angular Material 2 - 未在整页中呈现

Angular Material 2 - Not rendering in full page

javascript

angularjs

angular-material2

angular