如何将最初打开的扩展面板设置为默认关闭?

时间:2018-12-20 11:11:34

标签: angular typescript angular-material angular5

我有一个带有选项卡组和一个手风琴面板的sidenav。

问题在于一切正常,但是当我到达扩展面板标题所在的部分时,扩展面板就打开了。

实际上,第一次单击时,即使默认情况下它是打开的,它也会重新打开,因此我需要默认情况下将其关闭(我希望它显示为关闭,并且您必须单击以打开,该切换已经当您单击打开/关闭时有效,但我希望它显示为默认关闭

您可以在此gif中看到它:

GIF of initially opened accordion panel on sidenav

tabs-nav.component.html

<div class="breadcrumbs-sidenav">
    <div routerLink="/" routerLinkActive="active" (click)="back2Main()" style="cursor:pointer" class="vertical-align-text">Menú</div>
    <div *ngIf="numItemsSelected >= 1">&nbsp;<mat-icon>chevron_right</mat-icon>
    </div>
    <span *ngIf="numItemsSelected >= 1" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer;vertical-align: middle;" (click)="toBreadcrum1();">&nbsp;{{breadcrumb1.option}}</span>
    <div *ngIf="numItemsSelected >= 2">&nbsp;<mat-icon>chevron_right</mat-icon></div>
   <span *ngIf="numItemsSelected >= 2" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer" (click)="toBreadcrum2();">&nbsp;{{breadcrumb2.option}}</span>
    <div *ngIf="numItemsSelected >= 3">&nbsp;<mat-icon>chevron_right</mat-icon></div>
   <span *ngIf="numItemsSelected >= 3" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer" (click)="toBreadcrum3();">&nbsp;{{breadcrumb3.option}}</span>
   </div>
<div class="style-sidenav">
    <mat-tab-group class="navigation-tabs" [selectedIndex]="currentSelectedRootTab" dynamicHeight style="width:20vw; background-color:white">
        <mat-tab *ngFor="let rootTab of rootTabs; let rootIndex = index" [label]="rootIndex">
            <mat-nav-list>
        <div *ngFor="let rootOption of rootTab.options; let optionIndex = index;">
          <a mat-list-item *ngIf="!rootOption.rootTab && !rootOption.options" [routerLink]="rootOption.route" routerLinkActive="active"><mat-icon>{{rootOption.icon}}</mat-icon>{{rootOption.option}}</a>
          <mat-accordion *ngIf="rootOption.options">
              <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  {{rootOption.option}}
                </mat-panel-title>
              </mat-expansion-panel-header>
              <div *ngFor="let option of rootOption.options"
                   class="option-routes"
                   [routerLink]="option.route">
                <mat-icon>{{option.icon}}</mat-icon><span class="option-label">{{option.label}}</span>
              </div>
            </mat-expansion-panel>
          </mat-accordion>
          <a mat-list-item style="width:100%; color: #777777;" *ngIf="rootOption.rootTab" (click)="rootSelected(optionIndex, rootOption.rootTab, rootOption)"><mat-icon>{{rootOption.icon}}</mat-icon>{{rootOption.option}}<div><mat-icon style="padding-left:0%;">chevron_right</mat-icon></div></a>
        </div>
            </mat-nav-list>
        </mat-tab>
    </mat-tab-group>
</div>

tabs-nav.component.ts

import { Component } from '@angular/core';

@Component ({
  selector: 'app-tabs-nav',
  templateUrl: './tabs-nav.component.html',
  styleUrls: ['./tabs-nav.component.css']
})
export class TabsNavComponent {
  currentSelectedRootTab = 0;
  previousRootTab = 0;
  indexClicked = 0;
  numItemsSelected = 0;
  breadcrumb1;
  breadcrumb2;
  breadcrumb3;
  rootTabs = [
    {
      id: 0,
      options: [ // Aquí van las fijas, que no tienen ni drop ni transición //
        { option: 'Home', route: '/dashboard', icon: 'home' },
        { option: 'Link 1', route: '/parametros', icon: 'tune' },
        { option: 'Link 2', route: '/operativas', icon: 'settings' },
        { option: 'Link 3', route: '/productos', icon: 'layers' },
        { option: 'More', rootTab: 1, icon: 'flash_on' } // Esta si tiene transición //
      ]
    },
    {
      id: 1,
      options: [
        { option: 'OPTION 1', rootTab: 2 },
        { option: 'OPTION 2', rootTab: 4 },
        { option: 'OPTION 3', rootTab: 5 }
      ]
    },
    {
      id: 2,
      options: [
        {
          option: 'Portal Dropdown',
          route: '/Submenu1',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' },
            { label: 'Option 3', route: '/Submenu3', icon: 'filter_3' },
            { label: 'Option 4', route: '/Submenu4', icon: 'filter_4' },
            { label: 'Option 5', route: '/Submenu5', icon: 'filter_5' },
          ]
        },
        // { option: 'TestJustIgnore', route: '/Submenu2' },
        // { option: 'TestJustIgnore', route: '/Submenu3' },
        {
          option: 'Second Dropdown',
          route: '/Submenu4',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' }
          ]
        },
      ]
    },
    {
      id: 3, options: [
        { option: 'put additional options here' }
      ]
    },
    {
      id: 4,
      options: [
        {
          option: 'Portal Dropdown',
          route: '/Submenu1',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' },
            { label: 'Option 3', route: '/Submenu3', icon: 'filter_3' },
            { label: 'Option 4', route: '/Submenu4', icon: 'filter_4' },
            { label: 'Option 5', route: '/Submenu5', icon: 'filter_5' },
          ]
        },
        // { option: 'TestJustIgnore', route: '/Submenu2' },
        // { option: 'TestJustIgnore', route: '/Submenu3' },
        {
          option: 'Branches',
          route: 'Second Dropdown',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' }
          ]
        },
      ]
    },
    {
      id: 5,
      options: [
        {
          option: 'Portal Dropdown',
          route: '/Submenu1',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' },
            { label: 'Option 3', route: '/Submenu3', icon: 'filter_3' },
            { label: 'Option 4', route: '/Submenu4', icon: 'filter_4' },
            { label: 'Option 5', route: '/Submenu5', icon: 'filter_5' },
          ]
        },
        // { option: 'TestJustIgnore', route: '/Submenu2' },
        // { option: 'TestJustIgnore', route: '/Submenu3' },
        {
          option: 'Second Dropdown',
          route: '/Submenu4',
          options: [
            { label: 'Option 1', route: '/Submenu1', icon: 'filter_1' },
            { label: 'Option 2', route: '/Submenu2', icon: 'filter_2' }
          ]
        },
      ]
    }
  ];
  rootSelected(optionIndex, optionRootIndex, rootOption) {
    this.numItemsSelected++;
    this.previousRootTab = this.currentSelectedRootTab;
    this.currentSelectedRootTab = optionRootIndex;
    this.indexClicked = optionIndex;
    if (!this.breadcrumb1) {
      this.breadcrumb1 = rootOption;
    } else if (!this.breadcrumb2) {
      this.breadcrumb2 = rootOption;
    } else {
      this.breadcrumb3 = rootOption;
    }
  }
  back2Main() {
    this.currentSelectedRootTab = 0;
    this.previousRootTab = 0;
    this.indexClicked = 0;
    this.numItemsSelected = 0;
    this.breadcrumb1 = null;
    this.breadcrumb2 = null;
    this.breadcrumb3 = null;
  }
  toBreadcrum1() {
    if (this.numItemsSelected > 1) {
      this.currentSelectedRootTab = this.breadcrumb1.rootTab;
      this.breadcrumb2 = null;
      this.numItemsSelected--;
    }
  }
  toBreadcrum2() {
    if (this.numItemsSelected > 2) {
      this.currentSelectedRootTab = this.breadcrumb2.rootTab;
      this.breadcrumb3 = null;
      this.numItemsSelected--;
    }
  }
}

tabs-nav.component.css

::ng-deep .navigation-tabs .mat-tab-label-container{
  display:none;
}

.breadcrumbs-sidenav {
  display: flex;
  flex-direction: row;
  margin:1% ;
  height:10px;
  font-size: 13px;
  padding-top: 2.5px;
  padding-left: 2.5px;
}

.style-sidenav {
  display: flex;
  flex-direction: row;
  background-color:white;
  height: 100%;
  padding-top: 25px;
}


/* .vertical-align-text {
      padding-top: 1.5px;
      font-size: 13px;
      text-align: center;
      display: flex;
} */

.mat-expansion-panel:not([class*=mat-elevation-z]) {
  box-shadow: none;
}

.option-routes {
  margin-bottom: 5px;
  cursor: pointer;
  line-height: 35px;
  vertical-align: middle;
  color: #777777;
}

/* .option-label {
  margin-left: 10px;
} */

.material-icons {
    float: left;
}

.mat-icon {
  color: #fbc837;
  margin-right: 10px;
}

.mat-list-item, .mat-list-text, .mat-submenu-title, .mat-accordion, .vertical-align-text, .mat-expansion-panel-header-title { /* Color of the Sidenav Text */
  color: #777777;

}


.mat-expansion-indicator {
  color: #fbc837;
}

.mat-expansion-panel-header {
  height: 48px;
}

我正在使用Angular 5.2.0版本,但无法更新它,因此我需要此版本的解决方案。

0 个答案:

没有答案