特定の画面サイズで、角度材料ツールチップを無効にするにはどうすればよいですか？

Question

は、私がbuttonにtooltipを持っていると言う、と私は、ツールチップの代わりに携帯用のボタンのテキストラベルを非表示にしています：

<button md-button mdTooltip="Neat tooltip message" [mdTooltipDisabled]=" ??? "> 
    <md-icon>neat_icon</md-icon> <span fxShow.xs="false">Neat Button Label</span> 
</button> 

私は例えば、gt.xsの際にツールチップを無効にするにはどうすればよいですか？現在のサイズ範囲にアクセスする方法が必要ですが、見つけられません。

参照@angular/flex-layoutから

• Responsive API
• Breakpoints

Answer 1

ObservableMediaとMediaChangeは、現在の画面サイズを返しobservableにsubscribeに使用することができます。 demoコードで

、私はsmとxsのためのツールチップを非表示にしています。

component.ts：

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

@Component({ 
    selector: 'tooltip-position-example', 
    templateUrl: 'tooltip-position-example.html', 
    styleUrls: ['tooltip-position-example.css'], 
}) 

export class TooltipPositionExample { 

    disableTooltip: boolean = false; 

    constructor(media: ObservableMedia) { 
     media.asObservable() 
     .subscribe((change: MediaChange) => { 
     console.log(change.mqAlias); 
      if(change.mqAlias == 'sm' || change.mqAlias == 'xs'){ 
      this.disableTooltip = true; 
      } 
      else{ 
      this.disableTooltip = false; 
      } 
     }); 
    } 
} 

HTML：

<button md-button class="example-tooltip-host" mdTooltip="Neat tooltip message" 
     mdTooltipPosition="above" 
     [mdTooltipDisabled]="disableTooltip"> 
    Tooltip Test Button 
</button> 

flex-layout ObservableMedia Doc

・ホープ、このことができます！