如何为某些屏幕尺寸禁用角度材质工具提示?

Question

>假设我在按钮上有一个工具提示，并且我隐藏了按钮的文本标签以代替工具提示：

<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和@angular/flex-layoutMediaChange可用于subscribe返回当前屏幕大小的observable。

在演示代码中，我隐藏了sm和xs的工具提示。

组件.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>

弹性布局可观察媒体文档

希望这有帮助！