Угловой материал 2 - Не рендеринг в полном объеме

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

Вам не хватает атрибута fullscreen внутри тега md-sidenav-layout.

Этот атрибут добавляет эти свойства в мкр-sidenav верстки:

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

Это не очень хорошо документированы совсем еще, что такой атрибут может быть добавлен в мкр-sidenav-раскладку, так как он по-прежнему в альфа. Но within это preview в ngconf они демонстрируют некоторые из того, что вы можете использовать в настоящее время из материала 2.