Clarity Angular时间轴设置垂直布局导入枚举报错如何解决

错误原因 #

你使用的@clr/angular/timeline是Clarity的内部私有路径，并未对外暴露为可导入的公共模块，因此触发模块找不到的报错。

解决方案 #

方案一：正确导入枚举使用 #

1. 修正组件类中的导入路径，直接从@clr/angular根路径导入枚举：

import { ClrTimelineLayout } from '@clr/angular';

// 变量声明保持不变
orientation = ClrTimelineLayout.VERTICAL;

2. 模板绑定保持原有写法即可：

<clr-timeline [clrLayout]="orientation">
  <clr-timeline-step>
    <clr-timeline-step-header>11:59 am</clr-timeline-step-header>
  </clr-timeline-step>
</clr-timeline>

方案二：简化写法（无需导入枚举） #

clrLayout的枚举值底层对应同名字符串，不需要额外导入枚举也可以直接通过静态属性设置，不需要使用方括号绑定：

<clr-timeline clrLayout="VERTICAL">
  <clr-timeline-step>
    <clr-timeline-step-header>11:59 am</clr-timeline-step-header>
  </clr-timeline-step>
</clr-timeline>

修改完成后重新启动开发服务即可解决报错。

内容的提问来源于stack exchange，提问作者Mihai Socaciu