Question

对于一个项目，我目前需要从React切换到Angular，而我很难为我的组件使用者获得出色的DX。我想在构建时检查用户是否使用必需的属性。

在React中，这非常容易。我做这样的事情：

type Props = {
  value: number;
};

export const ShowValue: FC<Props> = ({ value }) => (
  <span>{value}</span>
);

如果用户写的是<ShowValue />而不是<ShowValue value={17} />，则会显示错误。

我可以在Angular中做类似的事情吗？鉴于我有这样的事情：

@Component({
  selector: 'show-value',
  template: `
    <span>{{value}}</span>
  `
})
export default class CounterComponent {
  @Input() value: number;
}

在构建过程中是否可以通过使用TypeScript和/或Angular AOT编译器来检测不正确的用法，例如<show-value></show-value>和<show-value value></show-value>（在上一个示例中未传递任何值-我需要一些东西）像<show-value value="17"></show-value>）。

Answer 1

如果需要根据需要设置Input，可以将其添加到selector中，如下所示（来源：github）

@Component({
  selector: 'show-value[value]',
  template: `
    <span>{{value}}</span>
  `
})

如果模板中未提供value（例如<show-value></show-value>），则编译器将返回错误。

如何在构建期间对构建组件启用必需的属性检查？

1 个答案: