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

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

    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");
    }
}

构造函数(
二等兵el:ElementRef，
私有渲染器：渲染器
) { }
@HostListener（'mouseover'）onHover（）{
const offWidth=this.el.nativeElement.offsetWidth；
const scrollWidth=this.el.nativeElement.scrollWidth；
如果（offWidth

这是行不通的。mat工具提示始终处于启用状态。属性已正确更新为true和false，但始终显示工具提示

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

---

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

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

快速示例：