@Angular/Material 全局工具提示 "mdTooltipShowDelay"

Question

我在 Angular4 项目中使用 MdTooltipModule 向用户显示工具提示。我像这样包含工具提示：

   <a *ngFor="let option of optionsToggle"
       mdTooltip="{{option.name | translate}}"
       mdTooltipShowDelay="1000"
       mdTooltipPosition="left">
      <i class="material-icons">{{option.icon}}</i>
    </a>

虽然这工作正常，但我想为我的整个项目全局设置一次 showDelay，并且不要一直重复这个。有什么简单的方法可以实现这一目标吗？我想使用绑定 [mdTooltipShowDelay]="value" 可能会有所帮助，但这不会访问静态变量，我不想在每个组件中初始化它。

Answer 1

从 Angular Material v5.1.0 实施 MAT_TOOLTIP_DEFAULT_OPTIONS 注入令牌，可用于覆盖 matTooltip 的默认选项.

const MAT_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MatTooltipDefaultOptions>;

在Angular Material v8中，MatTooltipDefaultOptions具有以下结构，如here所述：

export interface MatTooltipDefaultOptions {
  showDelay: number;
  hideDelay: number;
  touchendHideDelay: number;
  position?: TooltipPosition;
}

这些值的默认值是 here:

{
  showDelay: 0,
  hideDelay: 0,
  touchendHideDelay: 1500,
}

一个简单的实现是：

...
import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material';

export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
  showDelay: 1000,
  hideDelay: 500,
  touchendHideDelay: 1000,
};

@NgModule({
    imports: [...],
    providers: [
        {provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: myCustomTooltipDefaults}
    ],
})

演示 Stacklitz。

或者，我们可以在组件级别注入默认选项。按照这种方法，我们可以拥有多个具有不同默认值的组件。我们可以有一个组件：

export const fooCustomTooltipDefaults: MatTooltipDefaultOptions = {
  showDelay: 1000,
  hideDelay: 500,
  touchendHideDelay: 1000,
};
@Component({
     selector: 'foo',
     templateUrl: './foo.component.html',
     providers: [
       {provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: fooCustomTooltipDefaults}
     ],
})

还有另一个组件：

export const barCustomTooltipDefaults: MatTooltipDefaultOptions = {
  showDelay: 2000,
  hideDelay: 0,
  touchendHideDelay: 1000,
};

@Component({
     selector: 'bar',
     templateUrl: './bar.component.html',
     providers: [
       {provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: barCustomTooltipDefaults}
     ],
})

演示 Stackblitz。

Angular Material 文档： https://material.angular.io/components/tooltip/api#MAT_TOOLTIP_DEFAULT_OPTIONS

@Angular/Material 全局工具提示 "mdTooltipShowDelay"

@Angular/Material Tooltip global "mdTooltipShowDelay"

angular-material2

angular