切換md-sidenav模式（角度材質2）

Question

我有興趣將md-sidenav更改爲 - 從角度材質2模式（從臺式機到臺式機）到移動式。有沒有辦法通過編程來改變它？ 謝謝

Answer 1

建築，你可以更新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; 
    } 
} 

這給你開通過在桌面側邊欄默認情況下，並在移動設備上覆蓋，但默認情況下是隱藏的！

Answer 2

當然！您可以在組件on initialization中執行屏幕寬度測試（或瀏覽器檢測，blech），並將結果作爲字符串存儲在變量中。

使用寬度檢測作爲一個例子，你可能會做這樣的事情：

部分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"])，但這不在你原來的 問題的範圍之內。史蒂夫·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>