Angular @忽略HostBinding初始@Input值

我有一个指令，可以帮助向各种元素添加切换效果

export class AlloyToggleDirective {
    private toggled = false;

    @Input('alloyToggled')
    @HostBinding('class.alloy-toggled')
    get isToggled() { return this.toggled; }
    set isToggled(value: boolean) {
      this.toggled = value;
      this.alloyToggledChange.emit(this.toggled);
    }
    @Output() alloyToggledChange: EventEmitter<boolean> = new EventEmitter();

    toggle() {
      this.toggled = !this.toggled;
    }

    @HostListener('click')
    onclick() {
        this.toggled = !this.toggled;
        this.alloyToggledChange.emit(this.toggled);
    }
}

导出类AlloyToggleDirective{
private-toggled=false；
@输入（'alloyToggled'）
@HostBinding（'class.alloy toggled'）
get isToggled（）{返回this.toggled；}
设置isToggled（值：布尔值）{
this.toggled=值；
this.alloyToggledChange.emit（this.toggled）；
}
@Output（）alloyToggledChange:EventEmitter=新的EventEmitter（）；
切换（）{
this.toggled=！this.toggled；
}
@HostListener（'单击'）
onclick（）{
this.toggled=！this.toggled；
this.alloyToggledChange.emit（this.toggled）；
}
}

切换时效果良好，但忽略初始边界值：

<button [alloyToggled]="booleanValue">

---

HTML将反映该初始值，但该类仅在通过编程或鼠标切换后应用。当

@HostBinding

位于

@Input

上时，是否存在奇怪的交互？

存在一些问题：

• @输入定义

• 变量语法混淆

指令.ts

@Directive({
  selector: '[alloyToggled]'
})
export class HighlightDirective {
    @Input('alloyToggled') alloyToggled: boolean;
    @HostBinding('class.alloy-toggled')
    get isToggled() { return this.alloyToggled; }
    set isToggled(value: boolean) {
      this.alloyToggled = value;
      this.alloyToggledChange.emit(this.alloyToggled);
    }
    @Output() alloyToggledChange: EventEmitter<boolean> = new EventEmitter();

    toggle() {
      this.alloyToggled = !this.alloyToggled;
    }

    @HostListener('click')
    onclick() {
        this.alloyToggled = !this.alloyToggled;
        this.alloyToggledChange.emit(this.alloyToggled);
    }
}

export class AppComponent {
  booleanValue = true;
}

已编辑Highlight指令以反映预期的代码行为。

---

根据角度突出显示示例创建：

我猜

alloyToggled

和

toggled

从一开始就在战斗。由于get从一开始就应用false，因此您将始终收到false。有没有什么原因让你不使用

alloyToggled

，而把

私有设置为
？看看这个stackblitz，我想它会帮你理清指令：（还有，@Input语法方面的帮助）如果这是真的，那么
onClick
和对
booleanValue
的更改将不起作用。然而，他们确实如此。只有
booleanValue
的初始值被忽略。您是否真的在组件中手动更改“booleanValue”？乍一看，“alloyToggled”和“booleanValue”似乎都被忽略了，甚至不是这里等式的一部分。它开始时为
true
，但不应用已切换的
alloy
。单击一次什么也不做，它将切换到
false
，因此不应该拥有该类。第二次单击将应用该类，因为内部布尔值现在为true。因此初始值确实在指令中设置，但是，
HostBinding
只是忽略它。然而，它的内容，听取所有以下变化。从
主机
元数据中执行相同的行为。有趣的是，将我的代码插入到stackblitz中也能起作用。它必须涉及与主机组件的交互，然后…另一个开发人员添加了一些与菜单相关的逻辑，这些菜单在按钮中设置了
alloy开关。由于我在库中编写了大部分代码，因此我甚至没有想到在内部检查按钮…\u叹气\u感谢您的帮助，并将其标记为答案，因为它最终指向了第三个罪犯。
export class AppComponent {
  booleanValue = true;
}