时间戳

首页 > 解决方案 > Angular：我可以在编译时强制必须设置输入绑定吗？

angular - Angular：我可以在编译时强制必须设置输入绑定吗？

问题描述

如果我有以下组件：

@Component({
  selector: "test-component",
  templateUrl: "./test.component.html"
})
export class TestComponent implements OnInit {
  @Input() option: "A" | "B";

  ngOnInit(): void {
    if (!this.option) {
      throw new Error("option input must be set");
    }

    doSomethingWithOption(this.option);
  }
}

它必须像这样使用：

<test-component [whichYears]="'A'"></test-component>

我想强制组件必须传递option属性，并且它必须是Aor之一B。

上面的组件定义确实强制执行此要求，但它是在运行时执行的。

如果我编写如下代码，则仅当我将应用程序导航到使用该组件的页面时才会失败：

<test-component></test-component>

有没有办法让我的构建管道告诉我我没有正确使用该组件？理想情况下，我想要一个 typescript 编译错误，但是否有 Angular 工具或 eslint 配置可以帮助我？

通过使用“默认”值来解决option这个问题并不是这个问题的重点。我想知道我是否可以编写具有特定 API 要求的 Angular 组件，然后在构建时强制执行该用法。

该项目是 Angular 7。对于其他上下文，我是 Angular 的新手，并且来自 React/Typescript 背景，默认情况下，在编译时会强制执行这样的情况 - 也许我只是没有这样做“角度方式”？

标签： angulartypescript

解决方案

您可以通过在selector自定义组件中添加所需的参数来完成此操作。

@Component({
  selector: "test-component[option]", // where option here is the required @Input parameter
  templateUrl: "./test.component.html"
})

现在，如果您尝试使用该组件而不传递option，您将收到编译时错误。

推荐阅读