angular - 如何在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属性。