映射没有值的组件属性

Question

我正在为我的 Angular 组件提供一个属性。属性是指一个切换样式的布尔属性，您将其放入 HTML 中而不指定属性的值：

相对于输入（这不是我想要的）：

如果存在compact，则组件应将其值强制为布尔值：

1. <my-component compact="compact"> //
2. <my-component compact="true> //
3. <my-component compact="false"> //

如果compact 没有值，则映射为true：

4. <my-component compact> //

如果compact 丢失：

5. <my-component> //

但是，当我在没有属性值的情况下保留它时，组件会看到 null，因此即使我在构造函数中提供了默认值，我也无法区分 case #4 和 #5。

  constructor(
    @Attribute('compact') public compact,
  ) {
    console.log(this.compact) // `null` for <my-component compact>
  }

我应该怎么做？单独的属性装饰器是否有能力

Answer 1

在#1~4 的情况下，compact 的值的类型将始终为字符串。

在情况 #4 中，compact 的值是 空字符串（string 的类型），而情况 #5 将是 null（@987654324 的类型@)，因此您可以通过 typeof(compact) 区分 case #4 和 #5。