如何正确使用vmware清晰sidenav？

Question

我正在尝试使 VMware Clarity UI sidenav 正常工作，并且希望有一个可靠的示例。我正在使用清晰种子项目和 app.component.html 内部我有他们提供的默认子中殿：

<nav class="sub-nav" [clr-nav-level]="1">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="#" [routerLink]="['/home']"
               [class.active]="router.url==='/home' || router.url==='/'">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" [routerLink]="['/about']" [class.active]="router.url==='/about'">About</a>
        </li>
    </ul>
</nav>

我已将他们的主页替换为以下内容：

<nav class="sidenav">
    <section class="sidenav-content">
        <a class="nav-link" href="/test">Test</a>
    </section>
</nav>

sidenav 正确显示，但单击 Test 链接会导致整个应用程序刷新，并且我的测试页面的内容显示在 Home 页面下，但 subnav 消失了。如何让测试页面的内容显示在子导航的右侧？您可以在此处查看代码的 GIST：https://gist.github.com/MichaelRegert/6c5d9d3c8b52aa99d1dc66a314239f0e

Answer 1

请参考这个Plunk：https://plnkr.co/edit/3JnXm801uNlGWXz41BXD?p=preview

你的 plunk 有 2 个问题：

1. 您的布局结构不正确。我在上面发布的 plunk 中修复了这个问题。 .content-container 是 .main-container 的直接子代，.content-area 和 .sidenav 是 .content-container 的直接子代，因为 flexbox 的工作方式。

2. 使用 sidenav 的路由存在一些问题。我没有在上面的 plunk 中解决这个问题，因为这不是 Clarity sidenav 的问题，而是一般的角度路由问题。您应该为此打开一个单独的 Stackoverflow 问题。