功能模块中清晰设计的问题

Question

我在结合 Clarity Design Framework 构建我的 Angular 应用程序时遇到了一些困难。我遵循了入门指南 (https://clarity.design/get-started/developing/angular/)，并且元素本身工作正常。当我开始将 html 结构分解为多个组件时，问题就来了。

我开始构建 app.component.html，如下所示：

<div class="main-container">
    <header class="header-1">
        <div class="branding">
          <a href="/" class="nav-link">
            <clr-icon shape="shield-check"></clr-icon>
            <span class="title">test</span>
          </a>
        </div>
    </header>    
    <div class="content-container">
        <div class="content-area">
            <router-outlet></router-outlet>
        </div>
        <app-sidenav></app-sidenav>
    </div>
</div>

header 部分工作正常，但 sidenav（来自 Clarity 的 clr-vertical-nav）看起来不像 supposed to: how it actually look's

sidenav 组件位于功能模块中，如文档中所述，我在根模块和功能模块中导入了 BrowserAnimationsModule 和 ClarityModule。

sidenav-component.html:

<clr-vertical-nav>
  <a clrVerticalNavLink routerLink="./charmander" routerLinkActive="active">Charmander</a>
  <a clrVerticalNavLink routerLink="./jigglypuff" routerLinkActive="active">Jigglypuff</a>
  <a clrVerticalNavLink routerLink="./pikachu" routerLinkActive="active">Pikachu</a>
  <a clrVerticalNavLink routerLink="./raichu" routerLinkActive="active">Raichu</a>
  <a clrVerticalNavLink routerLink="./snorlax" routerLinkActive="active">Snorlax</a>
  <a clrVerticalNavLink routerLink="./credit" routerLinkActive="active">Credit</a>
</clr-vertical-nav>

但是，当我将 sidenav-component.html 的内容直接放在 app.component.html 中时，一切正常。谁能解释一下为什么或如何解决这个问题？

编辑：stackblitz

上的简单项目

提前致谢，克里斯

Answer 1

您可以尝试将 app-sidenav 元素移动到 .content-area div 上方吗？例如：

<div class="main-container">
    <header class="header-1">
        <div class="branding">
          <a href="/" class="nav-link">
            <clr-icon shape="shield-check"></clr-icon>
            <span class="title">test</span>
          </a>
        </div>
    </header>    
    <div class="content-container">
        <app-sidenav></app-sidenav>
        <div class="content-area">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

如果这不起作用，请启动一个简单的示例，该示例在 stackblitz 中与其中一位初学者一起重现了该问题，这样我就可以查看一个有效的应用程序。

------------编辑---------

确实有效。将 app-sidenav 移动到内容区域上方，并在应用程序端使用 css 处理 clr-vertical-nav 的高度。

下面是我选择写的css，ymmv:

clr-vertical-nav {
  height: 100%;
}

Here 是一个分叉的 stackblitz，展示了一个有效的 sidenav。

功能模块中清晰设计的问题

Problem with Clarity Design in feature modules

angular

vmware-clarity