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

Question

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

    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"
            />

Answer 1

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

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

然后使用引用将结果绑定(bind)到 [matTooltipDisabled] 有点像:

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

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