角度材料2 -不是在全页渲染

I am using Angular Material 2 for my Angular 2 app. My dashboard page is not rendering full page in the browser. Attached is the screenshot of the above mentioned issue.

我正在为我的角2应用使用角材料2。我的仪表板页面没有在浏览器中呈现整个页面。附件是上述问题的截图

AppComponent - Template file:

AppComponent -模板文件:

<router-outlet></router-outlet>

DashboardComponent - Template file :

仪表板组件-模板文件:

<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');   
  }

}

Am I missing something here ?

我是不是漏掉了什么?

Please refer : Screenshot of my half-page rendered dashboard page

请参考:我的半页渲染仪表板页面的屏幕截图

Appreciate your help.

感谢你的帮助。

1 个解决方案

#1

You are missing the fullscreen attribute inside of the md-sidenav-layout tag.

在md-sidenav-layout标记中，您丢失了全屏属性。

This attribute will add these properties to the md-sidenav-layout:

这个属性将把这些属性添加到md-sidenav-layout:

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

It's not very well documented quite yet that such an attribute can be added to the md-sidenav-layout since it is still in alpha. But within this preview at ngconf they demonstrate some of what you can currently use from Material 2.

还没有很好的文档说明可以将这样的属性添加到md-sidenav-layout中，因为它仍然在alpha中。但是在ngconf的预览中，他们展示了一些你现在可以从材料2中使用的东西。

#1