Angular @角度/材质工具提示“全局”；MDToolTipsShowDelay“；

我在Angular4项目中使用MDToolTimpModule向用户显示工具提示。我会像这样添加工具提示：

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

{{option.icon}

虽然这样做很好，但我想为我的整个项目全局设置一次showDelay，不要一直重复。有什么简单的方法可以做到这一点吗？

---

我想使用绑定[mdTooltipShowDelay]=“value”可能会有所帮助，但这不会访问静态变量，我不想在每个组件中初始化它。

来自Angular Material v5.1.0，实现了

MAT\u TOOLTIP\u DEFAULT\u OPTIONS

injection token，可用于覆盖

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}
    ],
})

演示

---

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

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}
     ],
})

演示

---

角材料文件：

---

来自Angular Material v5.1.0的实现了

MAT\u TOOLTIP\u DEFAULT\u 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}
    ],
})

演示

---

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

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}
     ],
})

演示

---

角材料文件：

---

我认为根据不可能以某种方式将默认值注入组件。在我看来，这实际上是一个非常糟糕的设计，因为允许对此类参数进行简单的全局配置应该是可能的，而无需付出太多的努力。您可以在与此相关的angular repo中创建问题模板只能访问组件类的字段和方法。其他一切都无法进入。这包括组件类可见的内容。这方面存在一个未决问题。实现起来应该不会太难，但它的优先级看起来很低。我认为，不可能以某种方式向组件注入默认值。在我看来，这实际上是一个非常糟糕的设计，因为允许对此类参数进行简单的全局配置应该是可能的，而无需付出太多的努力。您可以在与此相关的angular repo中创建问题模板只能访问组件类的字段和方法。其他一切都无法进入。这包括组件类可见的内容。这方面存在一个未决问题。应该不太难实现，但它看起来优先级较低多谢，这就像一个魅力，而且似乎在其他材质元素参数的范围内也得到了支持！非常感谢，这就像一个魅力工程，而且似乎也支持在其他材料元素参数的广泛范围！