Question

说我tooltip上有一个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

来自ObservableMedia的

MediaChange和@angular/flex-layout可用于subscribe到返回当前屏幕尺寸的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

希望这有帮助！

如何针对特定屏幕尺寸禁用角度材质工具提示？

1 个答案: