如何正确使用vmware clear 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链接会导致整个应用程序刷新,我的测试页面的内容显示在主页下,但是subnav消失了.如何将测试页面的内容显示在子窗口的右侧？您可以在此处查看代码的GIST:https://gist.github.com/MichaelRegert/6c5d9d3c8b52aa99d1dc66a314239f0e

Answer 1

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

你的punk有两个问题：

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

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