zoukankan      html  css  js  c++  java
  • tab切换组件nz-tab

    <nz-card [nzBordered]="true" nzTitle="卡片标题">
      <nz-card style=" 100%;" nzTitle="Card title" [nzExtra]="extraTemplate">
        <nz-card-tab>
          <nz-tabset nzSize="large" [(nzSelectedIndex)]="selectIndex">
            <nz-tab [nzTitle]="item.title" *ngFor="let item of tabs" (nzClick)="tabTo(item)"></nz-tab>
          </nz-tabset>
        </nz-card-tab>
        <router-outlet></router-outlet>
      </nz-card>
    </nz-card>
    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    @Component({
      selector: 'app-card-whole-consume',
      templateUrl: './card-whole-consume.component.html',
      styles: []
    })
    export class CardWholeConsumeComponent implements OnInit {
      selectIndex = 0;
      tabs: any[] = [
        {
          key: 'dashboard',
          title: '标题1'
        }, {
          key: 'department-salary-setting',
          title: '标题2'
        }
      ];
      constructor(private router: Router) { }
      ngOnInit() {
        this.initTab();
      }
      initTab() {
        // 设置再次刷新页面时还是显示之前的tab
        const key = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
        const idx = this.tabs.findIndex(w => w.key === key);
        this.selectIndex = idx;
        this.router.navigateByUrl(`/cardWhole/${this.tabs[this.selectIndex].key}`);
      }
      tabTo(tab) {
         this.router.navigateByUrl(`/cardWhole/${tab.key}`);
      }
    }
  • 相关阅读:
    更新我电脑的编译器之Java语言
    HTML/CSS基础
    查找元素的杀手锏xpath
    错误日志的实时抓取保证代码质量
    Splinter常用api
    从底层向上理解Git
    infer运用实践
    流程图在测试用例编写中的运用
    2016小结
    Splinter 查找元素
  • 原文地址:https://www.cnblogs.com/yuyedaocao/p/11002279.html
Copyright © 2011-2022 走看看