Angular Material 2 - 响应工具栏

Question

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

大银幕

在左侧显示“Main”-Logo / Link，其他top-nav链接 在右边。

小屏幕

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

注意：

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

注2：

“Main”-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>

我在哪里挣扎

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

非常感谢任何帮助，所以非常感谢你！

Answer 1

  

回答第一个问题：

创建一个css类说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>  

  

回答第二个问题：

您需要在屏幕大小调整时手动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();
    } 
}

链接到working demo。