Angular Material 2：SideNav无法正确显示其他组件中的任何元素
问题描述：
我与Angular Material（NG4）SideNav存在问题，并且其附加的叠加层无法正确显示其他组件中的任何元素（我的关注atm特别适用于我的注册组件）。这就像sidenav不知道DOM的其余部分？我对前端工作比较陌生，所以任何帮助，将不胜感激。我相信这简直是愚蠢的。Angular Material 2：SideNav无法正确显示其他组件中的任何元素
这是我的例子：
这里是我的main.component（TS不重要此组件ATM）：
<main>
<md-sidenav-container fullscreen>
<layout-header></layout-header>
<router-outlet></router-outlet>
<md-sidenav-container fullscreen>
</main>
这里是我的头组件文件：
HTML：
<header>
<md-sidenav #sidenav mode="push">
<img src="assets/png/xxxxxxxxxxxx_reversed_white_logo_web.png" alt="xxxxxxxxxxxx Logo" class="logo-wrapper"/>
<md-toolbar-row>
<mdb-squeezebox id="side-nav-accordion-wrapper" [multiple]="false" aria-multiselectable="false" class="text-right">
<mdb-item>
<mdb-item-head ripple-radius>Solutions & Services</mdb-item-head>
<mdb-item-body>
<ul>
<li class="active"><a href="https://www.xxxxxxxxxxxx.com/solutions-overview/" class="waves-effect" ripple-radius>Overview</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/strategic-growth-consulting/">For B2B</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/for-b2c/">For B2C</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/for-professional-services/">For Professional Services</a></li>
</ul>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head ripple-radius>Talent Solutions</mdb-item-head>
<mdb-item-body>
<ul>
<li><a href="#">HRAssistant</a></li>
</ul>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head ripple-radius>Resources</mdb-item-head>
<mdb-item-body>
<ul>
<li><a href="https://www.xxxxxxxxxxxx.com/sales-insights/">Sales Insights</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/professional-services-insights/">Professional Services Insights</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/case-studies/">Case Studies</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/podcasts/">Podcasts</a></li>
</ul>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head ripple-radius>Our Company</mdb-item-head>
<mdb-item-body>
<ul>
<li><a href="https://www.xxxxxxxxxxxx.com/leadership/">Leadership</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/growth-play-board-of-directors/">Board of Directors</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/our-customers/">Our Customers</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/our-partners/">Our Partners</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/news-and-events/">News & Events</a></li>
<li><a href="https://www.xxxxxxxxxxxx.com/business-development-consultant-careers/">Careers</a></li>
</ul>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head ripple-radius>Blogs</mdb-item-head>
<mdb-item-body>
<ul>
<li><a href="http://blog.xxxxxxxxxxxx.com/">Sales Blog</a></li>
<li><a href="http://blog.xxxxxxxxxxxx.com/practitioner">Professional Services Blog</a></li>
</ul>
</mdb-item-body>
</mdb-item>
<a href="https://www.xxxxxxxxxxxx.com/drive-revenue-growth/">Contact Us</a>
</mdb-squeezebox>
</md-toolbar-row>
</md-sidenav>
<md-toolbar color="primary">
<button md-button (click)="sidenav.toggle()">
<md-icon>menu</md-icon>
</button>
<span>{{title}}</span>
</md-toolbar>
</header>
打字稿：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'layout-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
title = "GrowthPlay Authentication";
constructor() { }
ngOnInit() {
}
}
这里是我的注册组件文件：
HTML
<section id="registrationComponent_old" class="container-fluid" role="document">
<div novalidate class="row">
<md-card class="card col-sm-6 mx-auto">
<md-card-header class="col-12 text-center">
<h2 class="skin-primary white-text col-12 text-center">
<i class="fa fa-lock"></i>Local Registration
</h2>
</md-card-header>
<div class="card-body">
<form novalidate [formGroup]="registrationForm">
<div class="error col-sm-12"></div>
<div class="md-form form-sm col-sm-12 row">
<div class="col-sm-12">
<i class="fa fa-envelope prefix"></i>
<input formControlName="email" id="email" class="form-control text-primary" type="text" placeholder="Email" name="email">
</div>
<div class="col-sm-12">
<i class="fa fa-lock prefix"></i>
<input formControlName="password" id="password" class="form-control text-primary" type="password" placeholder="Password" name="password">
</div>
<div class="col-sm-12">
<i class="fa fa-lock prefix"></i>
<input formControlName="confirmPassword" id="confirmPassword" class="form-control text-primary" type="password" placeholder=" Confirm Password" name="confirmPassword">
</div>
<div class="col-sm-12">
<i class="fa fa-user prefix"></i>
<input formControlName="firstName" id="firstName" class="form-control text-primary" type="text" placeholder="Enter your First Name" name="firstName">
</div>
<div class="col-sm-12">
<i class="fa fa-user prefix"></i>
<input formControlName="lastName" id="lastName" class="form-control text-primary" type="text" placeholder="Enter your Last Name" name="firstName" />
</div>
<div class="col-sm-12 row">
<div class="col">
<i class="fa fa-user prefix"></i>
</div>
<div class="col-12 row">
<mdb-ng-select class="col-4" [options]="optionsSelect" placeholder="Enter your language" ></mdb-ng-select>
</div>
</div>
<div class="col-sm-12 button-row">
<button md-raised-button color="accent" id="registerLink" class="col-lg-5 col-md-12" href="#" (click)="register()">Register</button>
<a md-raised-button color="primary" id="cancelLink" class="col-lg-5 col-md-12" [routerLink]="['/login']">Cancel</a>
</div>
<!--</div>-->
</div>
</form>
</div>
<!--<div>
<p>{{newUser.firstName}}</p>
<p>{{newUser.email}}</p>
<p>{{newUser.returnUrl}}</p>
</div>-->
</md-card>
</div>
</section>
打字稿：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { IUserRegistration, IUser} from "../../../shared/interfaces";
import { UserRegistration, User } from "../../../shared/models";
import { Router, RouterModule, Routes, ActivatedRoute } from '@angular/router';
import { Http, Headers, Response } from "@angular/http";
import { UserResource } from "../../../shared/resources";
import { AuthenticationService } from "../../../shared/services";
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.scss']
})
export class RegistrationComponent implements OnInit {
private newUser: IUserRegistration = new UserRegistration();
private registrationForm: FormGroup;
private optionsSelect: Array<any>;
private languages: Array<string>;
ngOnInit() {
this.registrationForm = new FormGroup({
firstName: new FormControl(),
lastName: new FormControl(),
email: new FormControl(),
password: new FormControl(),
confirmPassword: new FormControl(),
language: new FormControl()
});
this.optionsSelect = [
{ value: 'en-us', label: 'English' }
];
this.languages = ["eng"];
}
constructor(private user: UserResource, private route: ActivatedRoute, private router: Router, private http: Http, private authentication: AuthenticationService) {
}
register() {
this.newUser = this.user.save(this.newUser, (response) => {
var returnUrl;
this.authentication.getAuthorization(this.newUser.returnUrl).subscribe(data => {
window.location.href = data.url;
});//this.router.navigateByUrl(data.url));
});
}
}
答
的问题是，你想要一个sidenav重叠东西必须是内md-sidenav-container 。为了您的例子中，你会希望它看起来是这样的：
<md-sidenav-container fullscreen>
<main>
<md-sidenav #sidenav>
<layout-header></layout-header>
</md-sidenav>
<router-outlet></router-outlet>
</main>
</md-sidenav-container>
它的工作原理是这样的原因是，你能够离开页眉和页脚可见的任何“永久”型路由concerns.Here的一个使用@ angular/material和@ angular/flex-layout实现此方法的示例模板。
<div fxFlexFill fxLayout="column" fxLayoutAlign="center stretch">
<!-- Top Nav -->
<div fxFlex="100px">
<app-top-nav fxFlexFill FxLayout="row"></app-top-nav>
</div>
<!-- Body -->
<div fxFlex fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="space-around stretch">
<md-sidenav-container fxFlexFill>
<!-- Side-Nav -->
<div [ngClass]="{'side-nav-closed': navIsClosed, 'side-nav-open': !navIsClosed }">
<md-sidenav #sidenav [ngClass]="{'side-nav-closed': navIsClosed, 'side-nav-open': !navIsClosed }" mode="push" align="left" opened="true">
<app-side-nav fxFlexFill></app-side-nav>
</md-sidenav>
<div class="circle clickable" [ngClass]="{'circle-closed': navIsClosed }" (click)="sideNavToggle();"><md-icon>{{ navIcon }}</md-icon></div>
</div>
<!-- Main Outlet -->
<div fxFlex fxFlex.lt-sm="500px" class="overflow">
<router-outlet fxFlexFill></router-outlet>
</div>
</md-sidenav-container>
</div>
<!-- Footer -->
<div fxFlex="50px">
<app-footer></app-footer>
</div>
</div>
这样，侧导航栏使用mode="push"只推出一个div。您可以看到working demo here并查看github source code here。
+0
谢谢您的额外解释。这有助于我看到森林和树木，这往往是我学习的方式。我喜欢看到大局，所以我可以插入新的概念。很好的答案。 – Gustyn
请解释一下问题是什么..“不能正常显示”可能意味着很多东西!!!并且请尽量为同一个创建一个plunk –
对不起，我在完成之前意外发布了 – Gustyn
我不是确定如何为这个（或任何重要的事情）创建一个plunker有很多移动的部分 – Gustyn