Typescript 使用angular 6的动态选项卡

Typescript 使用angular 6的动态选项卡,typescript,angular6,angular5,angular7,Typescript,Angular6,Angular5,Angular7,我正在使用选项卡集作为选项卡 例如: 我需要使用ngx引导程序tabset动态关闭和添加选项卡 有人能帮我找到动态选项卡吗。请在app.component.HTML中替换此动态选项卡文件中的以下HTML代码 <alert type="success"> <strong>Tabs!</strong> you can enable/disable tab switching with the button here. </alert> <l

我正在使用选项卡集作为选项卡

例如:

我需要使用ngx引导程序tabset动态关闭和添加选项卡


有人能帮我找到动态选项卡吗。

请在app.component.HTML中替换此动态选项卡文件中的以下HTML代码

<alert type="success">
  <strong>Tabs!</strong> you can enable/disable tab switching with the button here.
</alert>

<label for="switcher">Disable tab switching: <input type="checkbox" [(ngModel)]="disableSwitching"></label>
<p>Tab switching is <strong>{{ disableSwitching ? 'disabled' : 'enabled ' }}</strong>.</p>
<hr>
<tabset #tabset>
  <tab *ngFor="let tab of tabsetData" [heading]="tab.tabtitle" [innerHTML]="tab.tabContent"></tab>
</tabset>

<button (click)='goto(0)'>Go to 1</button>
<button (click)='goto(1)'>Go to 2</button>
<button (click)='goto(2)'>Go to 3</button>

标签您可以使用此处的按钮启用/禁用选项卡切换。
禁用选项卡切换:
制表符切换是{{disableSwitching?'disabled':'enabled'}}


转到1 去2号 去3号
对于app.component.ts文件代码

import { Component, ViewChild , ViewChildren , QueryList , AfterViewInit } from '@angular/core';
import { TabsetComponent, TabDirective } from 'ngx-bootstrap/tabs';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit  {
  disableSwitching: boolean;

  @ViewChild('tabset') tabset: TabsetComponent;
  tabsetData = [{
    tabtitle: "First Tab",
    tabContent: "<p>First Tab</p>"
  },{
    tabtitle: "Second Tab",
    tabContent: "<p>Second Tab</p>"
  },{
    tabtitle: "Third Tab",
    tabContent: "<p>Third Tab</p>"
  }];
  ngAfterViewInit(){
    console.log(this.tabset.tabs);
  }

  goto(id){
    this.tabset.tabs[id].active = true;
  }
}
从'@angular/core'导入{Component,ViewChild,ViewChildren,QueryList,AfterViewInit};
从“ngx引导/tabs”导入{TabsetComponent,TabDirective};
@组成部分({
选择器:“我的应用程序”,
templateUrl:“./app.component.html”,
样式URL:['./app.component.css']
})
导出类AppComponent实现AfterViewInit{
禁用切换:布尔;
@ViewChild('tabset')tabset:TabsetComponent;
tabsetData=[{
tabtitle:“第一个选项卡”,
选项卡内容:第一个选项卡
},{
tabtitle:“第二个选项卡”,
选项卡内容:第二个选项卡
},{
tabtitle:“第三个选项卡”,
选项卡内容:第三个选项卡
}];
ngAfterViewInit(){
log(this.tabset.tabs);
}
转到(id){
this.tabset.tabs[id].active=true;
}
}
希望这有帮助!多谢各位