2

我正在为我的 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>

仪表板组件.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');   
  }

}

我在这里错过了什么吗？

请参考： 我的半页渲染仪表板页面截图

感谢你的帮助。

4

1 回答 1

2

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

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

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

由于它仍处于 alpha 阶段，因此可以将这样的属性添加到 md-sidenav-layout 中的文档还不是很好。但是在ngconf 的这个预览中，他们展示了一些你目前可以从材料 2 中使用的东西。

于 2016-06-24T20:05:25.243 回答