如何禁用某些屏幕尺寸的 Angular Material 工具提示？

Question

假设我有一个 tooltip on a button，我正在隐藏移动按钮的文本标签来代替工具提示：

<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 处禁用工具提示？一定有办法访问当前尺寸范围，但我找不到。

参考资料

Answer 1

@angular/flex-layout 中的

ObservableMedia 和 MediaChange 可用于 subscribe 到 returns 当前屏幕尺寸的 observable。

在 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

希望对您有所帮助！

如何禁用某些屏幕尺寸的 Angular Material 工具提示？

How can I disable an Angular Material tooltip for certain screen sizes?

breakpoints

tooltip

angular-material2

angular