Angular Material 2 : SideNav 没有正确显示在其他组件中的任何元素上

Question

我遇到 Angular Material (NG4) SideNav 的问题，其附加的叠加层无法正确显示在其他组件中的任何元素之上（我担心的 atm 特别适用于我的注册组件）。好像 sidenav 不知道 DOM 的其余部分？我对前端工作比较陌生，所以我们将不胜感激。我敢肯定这是非常简单的事情。

这是我的例子：

这是我的 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 &amp; 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 &amp; 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));



});

}
}

Answer 1

问题是任何你想要与 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>

之所以这样工作，是因为您可以让页眉和页脚对任何 "permanent" 类型的路由可见 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 and view the github source code here.

Angular Material 2 : SideNav 没有正确显示在其他组件中的任何元素上

Angular Material 2 : SideNav does not properly display over any element in other components

angular-material2

angular