Как обновить содержимое вкладки с помощью Bootstrap 4 / bootstrap-native-v4

Question

Я хочу представить вкладки с помощью Bootstrap 4 с bootstrap-native-v4 в приложении Angular 2.(Я включаю bootstrap-native-v4 через значение 'scripts' файла angular.json "./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js" - обратите внимание, я вижу bootstrap-native-v4включен в исходный файл [scripts.js] при просмотре через Chrome Developer Tools)

Я использую localhost: 4200 / myfolder для локального запуска моего приложения, однако для кода ниже, когда я наводю курсор мыши / нажимаюна вкладках по умолчанию URL-адрес localhost: 4200 / # home (вместо localhost: 4200 / myfolder # home), localhost: 4200 / # profile (вместо localhost: 4200 / myfolder # profile) и т. д.

Так что происходит, что страница отправляет сообщение обратно на несуществующий URL

Я попытался установить BaseURL в заголовке, однако, хотя это устраняет проблему с URL, страница не обновляет содержимое, когда янажмите на вкладки.Я также попытался установить href каждого якоря для myfolder # home, myfolder # profile и т. Д., Однако, опять же, хотя это устраняет проблему с URL (без обратной передачи), содержимое вкладки не обновляется

Я действительнохочу избежать использования JQuery (отсюда и использование bootstrap-native-v4) - большинство / все примеры, похоже, используют JQuery - я пытаюсь перейти через Data API (JS в области начальной загрузки bootstrap-native-v4 - ОК, хотя)

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist" data-tabs="tabs">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">a...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">b...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">c...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">d...</div>
</div>

Я хочу, чтобы код не отправлял обратно на сервер и просто переключался между вкладками, отображающими содержимое соответствующей вкладки

Может кто-нибудь помочь?

Answer 1

BSN разработчик здесь.Я хочу сказать следующее: я не специалист по Angular, но я могу сказать, что моя библиотека отходит от традиционных методов, событий и структуры плагинов jQuery, вам нужно подумать о Native JavaScript FIRST.

Предположим, вы работаетес полностью динамическим контентом, где контент добавляется / изменяется / удаляется позднее в / из DOM, вы можете попробовать работать с ним, следуя документации:

• init каждый из вашихнедавно добавленные вкладки с var myTab[N] = new Tab(element,options); (myTab [N] / myTab1 - это инициализация объекта для работы)
• взаимодействует с вашим объектом с помощью метода EG myTab[N].show();
• утилизируйте объект через myTab[N] = null;, затем удалите соответствующую вкладку + tabContent из DOM
• вкладкиКомпонент (как и все остальные в библиотеке) НЕ обрабатывает #myTab URL-навигацию

Проверьте документацию и вики для получения дополнительной информации, вымы могли бы найти несколько руководств, которые помогут вам надеяться.