angular2中的自定义导航选项卡中出现问题？

Question

我想创建一个导航标签，点击该标签会显示相应的标签（ID =＆＃39;标签-1＆＃39;，id =＆＃39;标签-2＆＃39;，id =＆＃39;标签-3＆＃39;。）

但是，在这里不知道如何实现逻辑。请帮我解决这个问题。

也欢迎任何其他类似的方法。

app.component.ts

tabName = ['tab1','tab2','tab3']

tabsUL(){

}

app.component.html

    <div class="pull-left  text-center" style="position:relative;cursor:pointer;width:100%;">
    <ul class=" nav nav-tabs " role="tablist">
    <li class="tab-link" *ngFor="let tab of tabName; let i = index;" [ngStyle]="{'width': 'calc(100% /' + tabName.length + ')'}">
    <a  (click)="tabsUL($event)" href="#tab-{{i+1}}" role="tab">{{tab}}</a>
    </li>
    </ul> 
    </div>
<div id="tab-1" class="tab-content rmpm" role="tabpanel">
            tab1 content
</div>
<div id="tab-2" class="tab-content rmpm" role="tabpanel">
            tab2 content
</div>
<div id="tab-3" class="tab-content rmpm" role="tabpanel">
            tab3 content
</div>

Answer 1

有几种方法可以做到这一点，但这应该会让你前进。你不需要路线。

在你的html中，使用* ngFor可以提高效率，然后使用* ngIf来控制要隐藏的内容和要显示的内容

app.component.html

中的

<div class="tab">
  <button (click)="selectTab = tab" class="tab-link" *ngFor="let tab of tabName; let i = index;" [ngStyle]="{'width': 'calc(100% /' + tabName.length + ')'}"> {{tab}}
    </button>
</div>

<div *ngFor="let tab of tabName;let i = index">
  <div *ngIf="selectTab === tab"  [attr.id]="'tab-' + (i+1)" class="tab-content rmpm" role="tabpanel">
    {{tabContent[i]}}
  </div>
</div>

然后在你的组件中你可以有一个select变量 标签数组和内容数组（甚至组合它们）

app.component.ts

中的

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent { 
   tabName = ['tab1','tab2','tab3'];
  tabContent = ['tab1 content', 'tab2 content', 'tab3 content'];
  selectTab = this.tabName[0];

}

添加了stackblitz此处演示的代码示例 https://stackblitz.com/edit/angular-sv8mtt