@Angular/Material Tooltip 全局“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>;

在角材质V8引擎，MatTooltipDefaultOptions具有以下结构，描述在这里：

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

这些值的默认值，如发现这里：

{
  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