使用@cds核心组件搭建VMware Clarity+Angular项目导航栏失效求助

架构老林

2026-10-3

问题1解答

导航栏失效的直接原因是你代码中使用的.main-container、.header等样式类是旧版Angular专属Clarity库（@clr/*系列）提供的类名，@cds/*系列为框架无关的Web Component组件库，不提供这类基于类的全局布局样式，所以样式完全不匹配。
如果你想沿用现有类式布局代码，需要额外安装@clr/ui和@clr/angular依赖，两套库可以同时共存无冲突。
二者定位区别如下：
- @cds/*：即Clarity Core，是Clarity的新一代核心实现，基于Web Component标准开发，框架无关，可在Angular/React/Vue等任意前端框架中使用，所有功能均通过<cds-*>自定义标签提供，无全局CSS布局类，官方迭代优先级最高。
- @clr/*：即Clarity Angular，是旧版Angular专属实现，目前已进入维护状态，不再新增功能，包含基于CSS类的全局布局样式和Angular专属封装的组件。

问题2解答

基于Angular + Clarity Core搭建新项目的完整步骤如下：

新建Angular 12+版本的项目，执行ng new your-project-name完成初始化。
安装所需依赖：
执行命令npm install @cds/core @cds/angular @cds/city modern-normalize --save，其中@cds/angular为Clarity提供的Angular适配层，可优化Web Component在Angular框架内的使用体验。
配置全局样式：
在项目根样式文件styles.scss中添加以下引入代码：

// 全局样式重置
@import 'modern-normalize/modern-normalize.css';
// Clarity全局基础样式
@import '@cds/core/global.min.css';
// 低版本浏览器兼容补丁
@import '@cds/core/styles/module.shims.min.css';
// Clarity默认字体
@import '@cds/city/css/bundles/default.min.css';

配置Angular根模块：
打开app.module.ts文件，引入CdsModule和自定义元素识别配置，示例如下：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CdsModule } from '@cds/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CdsModule.forRoot()
  ],
  // 新增该配置，让Angular可识别cds开头的自定义组件标签
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

替换原有类式布局代码为Clarity Core原生组件，顶部导航栏实现示例如下：

<cds-app-layout>
  <!-- 顶部导航栏 -->
  <cds-app-header>
    <cds-app-brand>
      <a routerLink="/">Site Name</a>
    </cds-app-brand>
    <!-- 导航项 -->
    <cds-app-nav>
      <cds-app-nav-item active routerLink="/home">Home</cds-app-nav-item>
      <cds-app-nav-item routerLink="/list">列表页</cds-app-nav-item>
    </cds-app-nav>
    <!-- 右侧用户信息 -->
    <cds-app-actions>
      <span>用户名</span>
      <cds-button action="flat" size="sm">退出</cds-button>
    </cds-app-actions>
  </cds-app-header>
  <!-- 页面内容区 -->
  <cds-app-content>
    <p>
      <cds-tag status="danger"> Some Text </cds-tag>
    </p>
  </cds-app-content>
</cds-app-layout>

执行ng serve启动项目，即可正常渲染所有Clarity Core组件。

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