无法通过自定义指令以编程方式启用和禁用 matTooltip答案

【问题标题】：Unable to programmatically enable and disable matTooltip through custom directive无法通过自定义指令以编程方式启用和禁用 matTooltip
【发布时间】：2020-01-29 15:17:29
【问题描述】：

这是正在使用的自定义指令，

    constructor(
      private el: ElementRef,
      private renderer: Renderer
    ) { }

    @HostListener('mouseover') onHover() {
    const offWidth = this.el.nativeElement.offsetWidth;
    const scrollWidth = this.el.nativeElement.scrollWidth;
    if(offWidth < scrollWidth) {
        this.renderer.setElementAttribute(this.el.nativeElement, 'matTooltipDisabled', false);
        console.log("enable tooltip");
    } else {
        this.renderer.setElementAttribute(this.el.nativeElement, 'matTooltipDisabled', true);
        console.log("disable tooltip");
    }
}

这不起作用。垫子工具提示始终启用。属性正确更新为 true 和 false，但始终显示工具提示。

           <input
                appMyCustomDirective
                class="testclass"
                name="testval"
                id="testid"
                [(ngModel)]="testval"
                type="text"
                autocomplete="off"
                [matTooltip] = "testval"
                matTooltipClass = "tooltip"
                matTooltipPosition = "above"
            />

【问题讨论】：

标签： angular angular-directive

【解决方案1】：

创建一个实现条件的指令并导出相同的引用：

@Directive({
  selector: '[isOutOfBound]',
  exportAs: 'outOfBound'
})
export class IsOutOfBoundDirective {
  constructor() { }
  @Input('isOutOfBound') outOfBound = false;
  @HostListener('mouseenter') onEnter() {
    this.outOfBound = !this.outOfBound;
  }
}

然后使用引用将结果绑定到[matTooltipDisabled] 有点像：

<button mat-raised-button
    matTooltip="Info about the action"
    [isOutOfBound]
    #c="outOfBound"
    [matTooltipDisabled]="c.outOfBound"
    >

快速示例：https://stackblitz.com/edit/angular-mjz2n7

【讨论】：