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

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>

标题部分工作正常，但侧导航（来自 Clarity 的 clr-vertical-nav）看起来不像 supposed 到：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 是一个分叉的堆栈闪电战，展示了一个工作侧导航。