映射没有值的组件属性

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，因此即使我在构造函数中提供了默认值，我也无法区分情况 #4 和 #5。

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

我该怎么办？属性装饰器单独可以吗

Answer 1

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

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