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上他们展示了你目前在材料2中可以使用的一些东西。

角度材质2 - 不在整页渲染

1 个答案: