md-sidenavモードの切り替え（角材2）

Question

md-sidenav - 角度材2モードからサイド（デスクトップ）から（モバイル）へ変更することに興味があります。プログラムで変更する方法はありますか？ ありがとう

Answer 1

ビルモバイルではオーバーレイされますが、デフォルトでは隠されています！

Answer 2

確かに！コンポーネントon initializationで画面幅テスト（またはブラウザ検出、ブリーチ）を行い、変数に結果を文字列として格納することができます。

部分app.component.ts

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core'; 

export class AppComponent implements OnInit { 
    @ViewChild('wrapper') 
    private wrapperElement: ElementRef; 

    private menuMode; // Where we'll store the resulting menu mode 

    ngOnInit() { 
    // Do your simple test on the container, for example 
    if (this.wrapperElement.nativeElement.offsetWidth <= 720) { 
     this.menuMode = "over"; 
    } else { 
     this.menuMode = "side"; 
    } 
    } 
} 

、テンプレート内sidenavに変数をバインドします。例として、幅検出を使用して

は、あなたがこのような何かを行う可能性があります。

部分app.component.html

<div #wrapper> 
    <md-sidenav-container> 
     <md-sidenav #sidenav [mode]="menuMode"></md-sidenav> 
     ... 
</div> 

その作業の大部分は、ちょうどあなたがテストを実行する方法を決定しています。

ラッパーの代わりにウィンドウをテストすることもできますが、私はラッパーをテストする方が好きです。

注：

1. これは未テストコードです。
2. これはあなたにも は、ユーザーが自分のブラウザとメニューモードの変更のサイズを変更する場合を扱いたい場合は、あなたが使用してもう少し何か 空想を行う必要があります、コンポーネントの初期化時にのみ発動しますHostListener@HostListener("window:resize", ["$event"])ですが、元の 質問の範囲外です。あなたはapp.component.html

   <md-sidenav [mode]="isLargeScreen() ? 'side' : 'over'" [opened]="isLargeScreen()"></md-sidenav> 
   

   を更新できそしてapp.component.ts

   isLargeScreen() { 
       const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
       if (width > 720) { 
        return true; 
       } else { 
        return false; 
       } 
   } 
   

   にこれはあなたによって開かデスクトップ上のサイドバーを与えるスティーブGのソリューションに

Answer 3

ObservableMediaによって解決策が見つかりました。

コンポーネント：

import {Component, OnInit, ViewEncapsulation} from "@angular/core"; 
import {ObservableMedia} from "@angular/flex-layout"; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-sidebar', 
    templateUrl: './sidebar.component.html', 
    styleUrls: ['./sidebar.component.scss'], 
    encapsulation: ViewEncapsulation.None, 
}) 
export class SidebarComponent implements OnInit { 

    constructor(public media:ObservableMedia) { 
    } 

    ngOnInit(): void { 
    } 

} 

テンプレート：

<md-sidenav-container> 
    <md-sidenav #sidenav mode="{{media.isActive('gt-sm') ? 'side' : 'over'}}" align="begin" class="md-whiteframe-4dp" opened > 
     <md-nav-list> 
     ... 
     </md-nav-list> 
    </md-sidenav> 

</md-sidenav-container>