VMWare Clarity Design System 和 Angular 9 Ivy 严格的模板类型检查答案

【问题标题】：VMWare Clarity Design System and Angular 9 Ivy strict template type checkingVMWare Clarity Design System 和 Angular 9 Ivy 严格的模板类型检查
【发布时间】：2020-06-12 17:35:17
【问题描述】：

我的项目使用 Angular (v9) 和 Clarity Design System (v3)。

有了 Ivy 和模板的严格类型检查，你如何处理 clrForm 元素的 clrLayout？

<form clrForm clrLayout="horizontal" clrLabelSize="4">
  [...]
</form>

这个表单给了我以下错误信息：

Type 'string' is not assignable to type 'number'. 用于属性 clrLabelSize="4"。
Type '"horizontal"' is not assignable to type 'Layouts'. 为clrLayout="horizontal"。

谢谢！

参考：https://clarity.design/documentation/forms

【问题讨论】：

标签： angular vmware ivy clarity

【解决方案1】：

我不是 Clarity 用户，但检查您需要使用 Layout 枚举的源。字符串不能用作枚举成员。要传入标签大小的数字，只需包装 [clrLabelSize] 属性，以便表达式计算为数字。否则作为字符串传递。

import { Layouts } from '[pathToClarity]/layout.service';

export class YourComponent {
   Layouts = Layouts
}

<form clrForm [clrLayout]="Layouts.HORIZONTAL" [clrLabelSize]="4">

我的来源是这些源文件： layout.service.ts, layout.ts

【讨论】：

对于Layouts，它更棘手。 @clr/angular 不导出 Layouts 并且使用指向 [pathToClarity]/layout.service 的直接路径导入不起作用，因为 node_modules 被排除在 Angular 的 tsconfig.json 中。 Clarity 项目团队在 GitHub 上通过#3380 确认了这个问题。在您阅读此解决方案时，它可能已经修复。
解决方法：在您的共享 UiModule 中重新定义 enum Layouts，以便您可以将其导入到您的组件中。
哇@Thierry，感谢您对此进行调查。我也担心枚举不会被导出。