Angular 2 Material SideNav 始终在桌面上打开，在移动设备上正常 [英] Angular 2 Material SideNav always open on desktp and normal on mobile

问题描述

我用angular 2材质制作了这个简单的侧面导航.我只想为台式机保留 oppened="true" 并保留手机和笔记本电脑的默认行为.这曾经存在于 Angular JS 材料中.我如何在 Angular 2 中实现这一点?

<md-sidenav #sideNav><md-导航列表><a>一个</a><a>两个</a></md-nav-list></md-sidenav><md-toolbar color="primary"><button md-icon-button (click)="sideNav.toggle()"><md-icon>菜单</md-icon><span>标题</span></md-工具栏><h1>{{标题}}</md-sidenav-container>

解决方案

@vinagreti 指出了非常有用的 angular/flex-layout 项目，该项目重新引入了一些曾经是 Angular Material 一部分的布局功能，但已被删除在版本 2+ 中.我已经在使用该库，因此很容易将它与来自 Angular Material 的 sidenav 结合使用来完成您在此处描述的操作:有一个 sidenav，它始终在大屏幕上打开，但在小屏幕上可切换.

您可以利用 sidenav 组件的 disableClose、mode 和 opens 属性来获取您想要的内容.

标记:

<md-sidenav #sidenav [ngClass.xs]="{'full-width': true}" [disableClose]="isSidenavCloseDisabled" [mode]="sidenavPosition" [opened]="isSidenavOpen>... Sidenav 的内容在这里....</md-sidenav>

组件:

import { Component, OnDestroy } from '@angular/core';从rxjs/订阅"导入{订阅}；从@angular/flex-layout"导入 { MediaChange, ObservableMedia };@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 OnDestroy {观察者:订阅；sidenavPosition = '侧';isSidenavOpen = true;isSidenavCloseDisabled = true;构造函数(媒体:ObservableMedia){this.watcher = media.subscribe((change: MediaChange) => {if (change.mqAlias === 'xs') {this.sidenavPosition = '结束';this.isSidenavCloseDisabled = false;} 别的 {this.isSidenavOpen = true;this.isSidenavCloseDisabled = true;this.sidenavPosition = '侧';}});}ngOnDestroy () {this.watcher.unsubscribe();}}

I made this simple side nav in angular 2 material. I want to keep oppened="true" only for desktop and keep the default behavior for mobiles and laptops. This used to be present in Angular JS material. How do I implement this in Angular 2 ?

<md-sidenav-container fullscreen>
  <md-sidenav #sideNav>
    <md-nav-list>
      <a>One</a>
      <a>Two</a>
    </md-nav-list>
  </md-sidenav>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sideNav.toggle()">
      <md-icon>menu</md-icon>

</button>
<span>Title</span>
  </md-toolbar>

  <h1>
    {{title}}
  </h1>
</md-sidenav-container>

解决方案

@vinagreti pointed out the incredibly useful angular/flex-layout project, which reintroduces some of the layout functionality that used to be part of Angular Material, but was removed in versions 2+. I was already using that library so it was pretty easy to use it in conjunction with the sidenav from Angular Material to do what you've described here: have a sidenav that is always open on large screens, but toggleable on smaller screens.

You can make use of the disableClose, mode, and opened attributes of the sidenav component to get what you want.

The markup:

<md-sidenav #sidenav [ngClass.xs]="{'full-width': true}" [disableClose]="isSidenavCloseDisabled" [mode]="sidenavPosition" [opened]="isSidenavOpen">
...Contents of Sidenav go here....
</md-sidenav>

The component:

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from "rxjs/Subscription";
import { MediaChange, ObservableMedia } from "@angular/flex-layout";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
  watcher: Subscription;
  sidenavPosition = 'side';
  isSidenavOpen = true;
  isSidenavCloseDisabled = true;

  constructor(media: ObservableMedia) {
    this.watcher = media.subscribe((change: MediaChange) => {
      if (change.mqAlias === 'xs') {
        this.sidenavPosition = 'over';
        this.isSidenavCloseDisabled = false;
      } else {
        this.isSidenavOpen = true;
        this.isSidenavCloseDisabled = true;
        this.sidenavPosition = 'side';
      }
    });
  }

  ngOnDestroy () {
    this.watcher.unsubscribe();
  }
}

这篇关于Angular 2 Material SideNav 始终在桌面上打开，在移动设备上正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！