Динамическая вкладка + начальная загрузка + угловая5 - PullRequest
Новая
       7

Динамическая вкладка + начальная загрузка + угловая5

0 голосов
/ 27 июня 2018

Я новичок в Front-End и угловой части. Мне нужно динамически загружать вкладки из того, что он возвращал из Backend ...

Учтите, что я получаю массив, как показано ниже: 

*["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>

Также я должен убедиться, что при нажатии на вкладку должен вызываться метод с кликнувшим именем. Все должно быть динамично. Пожалуйста, предложите свои идеи. Спасибо.

Ответы [ 3 ]

0 голосов
/ 27 июня 2018

Я достиг такой функциональности, используя 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>

Проверьте полное использование здесь .

0 голосов
/ 27 июня 2018

Итак, существуют разные способы его реализации. Один способ, предложенный @Comann, определенно сработает Другой способ сделать то же самое - установить загрузочную зависимость - попробуйте сделать 

npm install --save bootstrap

Импортируйте это в ваш файл styles.css 

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

Вы также можете импортировать его в свой файл angular.json, если вы сгенерировали проект с помощью angular-cli. Я предпочитаю, чтобы это было в styles.css.

Создайте отдельный компонент navbar и в шаблоне 

<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 в массиве вкладок и заполнять его. Надеюсь, это поможет.

0 голосов
/ 27 июня 2018

вам нужно изменить 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>
...