如何在vmware-clarity，Angular6中将sidenav导航链接的默认状态设置为关闭

Question

当我在sidenav中创建vmware-clarity时，nav-links和nav-groups都默认打开。

是否可以默认关闭它们？

 <ng-container *ngFor="let data of model">
    <a [routerLink]="data.routerLink" class="nav-link" *ngIf="data.items == null">
        {{data.label}}
    </a>
    <section class="nav-group collapsible"  *ngIf="data.items != null">
        <input id="{{data.label}}" type="checkbox">
        <label for="{{data.label}}">{{data.label}}</label>
        <ul class="nav-list">
            <li><a class="nav-link" *ngFor="let item of data.items" [routerLink]="item.routerLink">{{item.label}}</a></li>
        </ul>
    </section>
</ng-container>

这是页面加载时它们的显示方式：

我想要在负载上发生什么：

感谢您的帮助！

Answer 1

您需要做的就是预先选中要预折叠的每个部分的复选框。使用您的示例，您需要添加的只是checked循环中复选框输入上的*ngFor属性：

<input id="{{data.label}}" type="checkbox" checked>

这是一个正在运行的示例，其中显示一个开始折叠的部分，另一个开始展开的部分：https://stackblitz.com/edit/clarity-sidenav-pre-collapsed?file=src/app/app.component.html 两者之间的唯一区别是checked属性。