vmware - 如何正确使用 vmware 清晰度 sidenav？

Question

我正在尝试让 VMware Clarity UI sidenav 正常工作，并且会喜欢一个可靠的例子。我正在使用 clear-seed 项目，并且在 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 有两个问题:

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

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