Angular自定义指令传递条件变量异常？求排查与解决

错误原因 #

你定义的classes数组是在类的实例初始化阶段（构造函数执行前）就被创建的，而Angular的@Input属性（outline、small）要等到组件/指令实例化完成后，也就是ngOnInit钩子执行前才会完成绑定赋值。此时数组里的this.outline和this.small都是undefined，导致三元表达式全部走了false分支，最终出现变量值不生效的问题。

另外代码里存在重复的样式项：this.small ? 'py-1' : 'py-3'重复了两次，需要清理。

修正后的指令代码 #

import { Directive, ElementRef, Renderer2, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[air-btn]'
})
export class AirBtnDirective implements OnInit {

  @Input() small?: boolean;
  @Input() outline?: boolean;

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

  ngOnInit(): void {
    // 移到ngOnInit中创建数组，此时Input属性已完成赋值
    const classes: string[] = [
      'relative',
      'disabled:opacity-70',
      'disabled:cursor-not-allowed',
      'rounded-lg',
      'hover:opacity-80',
      'transition',
      'w-full',
      this.outline ? 'bg-white' : 'bg-rose-500',
      this.outline ? 'border-black' : 'border-rose-500',
      this.outline ? 'text-black' : 'text-white',
      this.small ? 'text-sm' : 'text-md',
      this.small ? 'py-1' : 'py-3',
      this.small ? 'font-light' : 'font-semibold',
      this.small ? 'border-[1px]' : 'border-2'
    ];

    console.log(this.outline); // 现在能正确输出传入的true
    classes.forEach((val) => {
      this.renderer.addClass(this.el.nativeElement, val);
    });
  }
}

优化方案（支持动态更新属性） #

如果需要响应Input属性的动态变化（比如后续修改outline的值），可以用getter动态生成类数组，并在ngOnChanges钩子中更新样式：

import { Directive, ElementRef, Renderer2, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[air-btn]'
})
export class AirBtnDirective implements OnInit, OnChanges {

  @Input() small?: boolean;
  @Input() outline?: boolean;

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

  private get classes(): string[] {
    return [
      'relative',
      'disabled:opacity-70',
      'disabled:cursor-not-allowed',
      'rounded-lg',
      'hover:opacity-80',
      'transition',
      'w-full',
      this.outline ? 'bg-white' : 'bg-rose-500',
      this.outline ? 'border-black' : 'border-rose-500',
      this.outline ? 'text-black' : 'text-white',
      this.small ? 'text-sm' : 'text-md',
      this.small ? 'py-1' : 'py-3',
      this.small ? 'font-light' : 'font-semibold',
      this.small ? 'border-[1px]' : 'border-2'
    ];
  }

  ngOnInit(): void {
    this.updateClasses();
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 当Input属性变化时重新更新样式
    this.updateClasses();
  }

  private updateClasses(): void {
    // 先清除旧类，再添加新类，避免重复或残留样式
    const nativeEl = this.el.nativeElement;
    nativeEl.classList.remove(...nativeEl.classList);
    this.classes.forEach(cls => this.renderer.addClass(nativeEl, cls));
  }
}

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