@angular-jz/jz/jz/component/jz-nav/jz-nav.component.html

jim jz

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu" #menu>
            <li class="nav-header">
                <div class="dropdown profile-element">
                    <div class="row">
                        <div class="col-md-4"><img alt="image" class="img-circle" src="/assets/images/profile_small.jpg" /></div>
                        <div class="col-md-8"><h3 style="color:white; line-height:50px;">{{userName}}</h3></div>
                    </div>
                    <!--<a data-toggle="dropdown" class="dropdown-toggle" (click)="openMenu()">
                        <span class="clear">
                            <span class="block m-t-xs">
                                <strong class="font-bold">{{userName}}</strong>
                            </span> <span class="text-muted text-xs block">{{roleNames}} <b class="caret"></b></span>
                        </span>
                    </a>-->
                    <ul class="dropdown-menu animated fadeInRight m-t-xs">
                        <li><a href="profile.html">个人资料</a></li>
                        <li><a href="contacts.html">联系人</a></li>
                        <li><a href="mailbox.html">邮箱</a></li>
                        <li class="divider"></li>
                        <li><a href="login.html">登出</a></li>
                    </ul>
                </div>
                <div class="logo-element">
                    IN+
                </div>
            </li>
            <li class="" [class.active]="item.isActive" *ngFor="let item of dataSource | cascade: {fieldName: 'isVisible', fieldValue: true}">
                <ng-container *ngIf="!item.children.length">
                    <a [routerLink]="item.url"><i class="fa {{item.icon}}"></i> <span class="nav-label">{{item.name}}</span></a>
                    <ul class="nav nav-second-level collapse"></ul>
                </ng-container>
                <ng-container *ngIf="item.children.length">
                    <a><i class="fa {{item.icon}}"></i> <span class="nav-label">{{item.name}}</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse" [class.in]="item.isActive">
                        <li *ngFor="let itemChild of item.children | cascade: {fieldName: 'isVisible', fieldValue: true}">
                            <a [routerLink]="itemChild.url" [queryParams]="itemChild.queryParams" routerLinkActive="active" [class.active]="itemChild.isActive">{{itemChild.name}}</a>
                        </li>
                    </ul>
                </ng-container>
            </li>
        </ul>
    </div>
</nav>