7

我正在尝试让 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

4

1 回答 1

4

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

您的 plunk 有 2 个问题：

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

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

于 2017-03-17T16:17:54.640 回答