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] =＆＃34;值＆＃34;可以提供帮助，但这不会访问静态变量，我也不想在每个组件中进行初始化。

Answer 1

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

const MAT_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MatTooltipDefaultOptions>;

一个简单的实现是：

...
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 Tooltip global＆＃34; mdTooltipShowDelay＆＃34;

1 个答案: