有没有办法从两个可能的@Inputs中设置一个变量？ （Angular2 +）

Question

我正在尝试为Angular8中的指令定义一组输入，同时尝试也支持旧版指令。展望未来，我想用驼峰式命名我的输入，但我以前的输入用kebab命名。因此，为了支持旧版指令，我需要知道存在哪些输入，然后设置一个变量。请注意，我们可以确保一次只显示一个输入。本质上，我想禁用先前的指令并同时启用新指令，而又不浪费时间回溯和更新该指令被调用的任何地方。

这就是我要调用我的指令的方式：

<button ft-targets-modal="modal1">Button</button>
<button ftTargetsModal="modal1">Button</button>

这是我到目前为止所拥有的：

@Directive({
    selector: '[ft-targets-modal],[ftTargetsModal]',
    inputs: ['ftTargetsModal']
})
export class TargetsModal implements OnInit {
    id: string;

    @Input("ft-targets-modal")
    targetsModal: string;
    ftTargetsModal: string;

    ngOnInit() {
        this.id = targetsModal || ftTargetsModal;
    }
}

这有效，但是看起来很糟糕。因此，我希望你们中的一个能够将我引向一种看起来并不那么糟糕的解决方案，或者我在@Input（）上缺少的东西或其他东西。

谢谢大家！

Answer 1

export class TargetsModal implements OnInit {
    @Input("ftTargetsModal")
    id: string;

    @Input("ft-targets-modal")
    set ftTargetsModal(id: string) {
      this.id = id;
    }
}

但是除非该指令是公共库的一部分，否则我将使用全局查询替换来简单地重构该指令的所有用法。