Angular Material 2 - 响应式工具栏

Question

使用 Angular 4 我试图在页面顶部设置一个具有以下行为的工具栏：

大屏幕

在左侧显示“主要”-Logo/Link，其他顶部导航链接 在右边。

小屏幕

将“主”-Logo Link 居中显示，并在左侧显示一个菜单按钮，用于显示 sidenav（如果屏幕很大，则包含在右侧可见的链接）。

注：

sidenav 不应越过工具栏（如果可见）。

注2：

“主”-Logo/Link 的居中应根据整个屏幕宽度居中。它不应该被菜单按钮推到右边。

我有什么

<div fxLayout="column" fxFlex>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sidenav.toggle()" fxHide="false" fxHide.gt-sm>
      <md-icon>menu</md-icon>
    </button>
    <button md-button routerLink="/">
      <md-icon>code</md-icon>
      <span>{{title}}</span>
    </button>
    <div fxFlex fxShow="false" fxShow.gt-sm></div>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm>
      <button md-button routerLink="/about">About</button>
      <button md-button routerLink="/legal">Legal Notice</button>
    </div>
  </md-toolbar>
  <md-sidenav-container fxFlex>
    <md-sidenav #sidenav fxHide="false" fxHide.gt-sm>
      <md-nav-list>
        <a md-list-item href="">Main</a>
        <a md-list-item href="/about">About</a>
        <a md-list-item href="/legal">Legal Notice</a>
      </md-nav-list>
    </md-sidenav>
  </md-sidenav-container>
</div>

我奋斗的地方

• 我不知道如何将“主要”-Logo/Link 正确居中
• 如果我在小屏幕上显示菜单并将布局切换回大屏幕，菜单不会隐藏

---

如有任何帮助，我们将不胜感激，谢谢！

Answer 1

Answer to your First Question:

创建一个 css class 说 fill-space 并使用它来使徽标居中：

.fill-space {
    flex: 1 1 auto;
}

...并在您的模板中：

<span fxFlex fxHide="false" fxHide.gt-sm class="fill-space"></span>
<button md-button routerLink="/">
  <md-icon>code</md-icon>
  <span>{{title}}</span>
</button>
<span class="fill-space"></span>  

Answer to your Second Question:

您必须 close() 在屏幕调整大小时手动调整 sidenav。您可以使用 @HostListener('window:resize', ['$event']):

来检测

在您的打字稿中，进行以下更改：

// Import the following in your ts file
import { ViewChild, HostListener } from '@angular/core';
import { MdSidenav } from '@angular/material';

// Add the following in your component class to get sidenav
@ViewChild('sidenav') sidenav: MdSidenav;

// Add the method to detect screen-resize
@HostListener('window:resize', ['$event'])
onResize(event) {
    if(this.sidenav !== undefined){
        this.sidenav.close();
    } 
}

Link 到 working demo.