Question

我是前端和棱角部分的新手。我需要从后端返回的内容动态加载标签...

考虑到我得到的数组如下：

*["tab1","tab2","tab3"].*

我在带有tab1，tab2，tab3的页面中显示标签。

我尝试过的是硬编码的，可以正常工作，

 <div class="nav-tabs-custom">
          <ul class="nav nav-tabs" >
            <li class="active"><a href="#tab_1" data-toggle="tab" (click)="loadData('abc')"><b>tab1</b></a></li>
            <li><a href="#tab_2" data-toggle="tab" (click)="loadData('xxx')"><b>tab2</b></a></li>
            <li><a href="#tab_3" data-toggle="tab" (click)="loadData('xyz')"><b>tab3</b></a></li>
             <li><a href="#tab_4" data-toggle="tab" (click)="loadData('fgfgfg')"><b>tab4</b></a></li>
          </ul>
    </div>
<div class="tab-content">            
        <div class="tab-pane active" id="tab_1"> </div>
        <div class="tab-pane active" id="tab_2"> </div>
        <div class="tab-pane active" id="tab_3"> </div>
        <div class="tab-pane active" id="tab_4"> </div>
</div>

此外，我还必须确保在单击选项卡时，它应该调用带有单击名称的方法。一切都应该是动态的。请提出您的想法。谢谢。

Answer 1

您必须将 href =“＃id” 更改为 data-target =“＃id”

    <div class="nav-tabs-custom">
          <ul class="nav nav-tabs" >
            <li class="active"><a data-target="#tab_1" data-toggle="tab" (click)="loadData('abc')"><b>tab1</b></a></li>
            <li><a data-target="#tab_2" data-toggle="tab" (click)="loadData('xxx')"><b>tab2</b></a></li>
            <li><a data-target="#tab_3" data-toggle="tab" (click)="loadData('xyz')"><b>tab3</b></a></li>
             <li><a data-target="#tab_4" data-toggle="tab" (click)="loadData('fgfgfg')"><b>tab4</b></a></li>
          </ul>
    </div>
<div class="tab-content">            
        <div class="tab-pane active" id="tab_1"> </div>
        <div class="tab-pane active" id="tab_2"> </div>
        <div class="tab-pane active" id="tab_3"> </div>
        <div class="tab-pane active" id="tab_4"> </div>
</div>

Answer 2

我使用ngx-Bootstrap

实现了这种功能

选项卡数组：

tabs: any[] = [{
    title: 'Dynamic Title 1',
    content: 'Dynamic content 1'
  },
  {
    title: 'Dynamic Title 2',
    content: 'Dynamic content 2'
  },
  {
    title: 'Dynamic Title 3',
    content: 'Dynamic content 3',
    removable: true
  }
];

显示标签：

<tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="let tabz of tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         [disabled]="tabz.disabled"
         [removable]="tabz.removable"
         (removed)="removeTabHandler(tabz)"
         [customClass]="tabz.customClass">
      {{tabz?.content}}
    </tab>
  </tabset>

检查全部使用情况here。

Answer 3

因此，有多种实现方法。 @Comann建议的一种方法肯定会起作用。另一种执行相同操作的方法是安装引导程序依赖项-尝试执行

npm install --save bootstrap

将其导入您的styles.css文件

@import '~bootstrap/dist/css/bootstrap.css';

如果您可能已经使用angular-cli生成了项目，则也可以将其导入angular.json文件中。我更喜欢在styles.css中。

在模板中创建一个单独的导航栏组件

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" routerLink="/route1">Route1<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/route2">Route 2</a>
    </li>
  </ul>
 </div>
 </nav>
 <router-outlet></router-outlet>

您无需在两个路由器链接上进行硬编码，而是在选项卡数组上使用* ngFor进行循环并填充它。希望这会有所帮助。

动态标签+引导程序+ angular5

3 个答案: