角度材质2 - 未完整渲染

我正在使用Angular Material 2作为我的Angular 2应用程序。我的仪表板页面不是在浏览器中呈现整页。附上的是上述问题的截图。角度材质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

感谢你的帮助。

来源

2016-06-24 VignesHKumaR

使用看看这个例子中，它呈现全页https://github.com/kara/puppy-love – AngJobs

@AngJobs：谢谢 – VignesHKumaR

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

此属性将这些属性添加到MD-sidenav布局：因为它仍然是

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

这不是很好的记录相当，但这样的属性可以被添加到MD-sidenav布局在阿尔法。但是within这个preview在ngconf他们表现出了一些什么，你可以从目前材料2

来源

2016-06-24 20:05:25

角度材质2 - 未完整渲染

回答

相关问题