映射没有值的组件属性

Question

我在为Angular组件提供属性之后。按属性我的意思是你在HTML中放置的切换式布尔属性，而不指定属性的值：

而不是输入（这不是我想要的）：

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

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

如果compact没有值，那么它映射到true：

4. <my-component compact> // <= true

如果compact丢失了：

5. <my-component> // <= false

但是当我没有属性值时，组件看到null，所以即使我在构造函数中提供默认值，我也无法区分大小写＃4和＃5。

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

我该怎么办呢？是否属性装饰器能够

Answer 1

在＃1~4的情况下，compact的值的类型将始终为string。

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