Angular 7中动态传递Tooltip指令placement属性（禁用ngOnChanges）

嘿，我来给你支招！在Angular 7里要动态更新Tooltip指令的placement属性又不能用ngOnChanges，用属性 setter绝对是最省心的方案，实现起来也很直观。下面是具体的做法：

1. 修改Tooltip指令，给placement属性添加Setter #

把原本的普通@Input()属性改成带setter的形式，这样每次placement的绑定值变化时，setter方法会自动触发，我们就能在里面更新Tooltip的位置配置了。

示例代码：

import { Directive, ElementRef, Input } from '@angular/core';
// 导入你实际使用的Tooltip相关服务/依赖（比如第三方库的API）
import { YourTooltipService } from './your-tooltip.service';

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  // 私有变量存储当前placement值
  private _currentPlacement: string = 'top'; // 设置默认位置

  // 带Setter的输入属性
  @Input('appTooltipPlacement')
  set placement(newPlacement: string) {
    // 更新存储的位置值
    this._currentPlacement = newPlacement;
    // 调用方法更新Tooltip的实际位置
    this.refreshTooltipPlacement();
  }
  // 配套的Getter，方便内部获取当前值
  get placement(): string {
    return this._currentPlacement;
  }

  constructor(
    private el: ElementRef,
    private tooltipService: YourTooltipService
  ) {}

  // 核心方法：根据新的placement值更新Tooltip
  private refreshTooltipPlacement(): void {
    // 这里根据你实际的Tooltip实现逻辑调整：
    // 比如如果是第三方库，可能需要先销毁旧的Tooltip实例，再用新的placement重新初始化
    // 或者直接调用库提供的更新位置的API
    this.tooltipService.updateTooltipPosition(
      this.el.nativeElement, 
      this._currentPlacement
    );
  }
}

2. 在模板中动态绑定placement值 #

完成指令修改后，就可以在组件模板里直接把placement绑定到动态变量上了：

<!-- 按钮示例：动态切换Tooltip位置 -->
<button 
  appTooltip
  [appTooltipPlacement]="dynamicPlacement"
  appTooltip="这是我的提示内容"
>
  悬停查看提示
</button>

<!-- 可以加个按钮用来切换位置，测试动态效果 -->
<button (click)="togglePlacement()">切换提示位置</button>

对应的组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  // 动态存储placement值，默认top
  dynamicPlacement: string = 'top';

  // 切换位置的方法
  togglePlacement(): void {
    this.dynamicPlacement = this.dynamicPlacement === 'top' ? 'bottom' : 'top';
  }
}

为什么这个方案可行？ #

• 相比ngOnChanges，属性setter只会在指定的placement属性变化时触发，不会监听所有输入属性的变化，更精准高效。
• 完全避开了ngOnChanges的使用，符合你的要求。
• 实现逻辑清晰，代码也更容易维护。

内容的提问来源于stack exchange，提问作者Santhosh