Question

我想在Angular 2应用程序中使用带有Bootstrap-native-v4的Bootstrap 4的Tabs。（我通过angular.json文件“脚本”值“ ./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js”添加了bootstrap-native-v4-注意，我可以看到bootstrap-native-v4通过Chrome开发者工具查看时，包含在源[scripts.js文件]中）

我正在使用localhost：4200 / myfolder在本地运行我的应用程序，但是对于以下代码，当我将鼠标悬停/单击选项卡时，URL默认为localhost：4200 /＃home（而不是localhost：4200 / myfolder＃主页），localhost：4200 /＃profile（而不是localhost：4200 / myfolder＃profile）等

所以发生的是，该页面将帖子发回到了不存在的URL

我尝试在头部设置BaseURL，但是，尽管这解决了URL问题，但是当我单击选项卡时，页面不会刷新内容。我还尝试将每个锚的href设置为myfolder＃home，myfolder＃profile等，尽管这可以解决URL问题（不回发），但选项卡内容不会刷新

我真的很想避免使用JQuery（因此使用bootstrap-native-v4）-大多数/所有示例似乎都使用JQuery-我正尝试通过Data API（bootstrap-native-v4中的JS）范围还可以吗？

<!-- 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。

假设您正在使用完全动态的内容，以后在DOM中添加/更改/删除了内容，则可以按照文档尝试使用它：

初始化使用var myTab[N] = new Tab(element,options);（myTab [N] / myTab1是要使用的初始化对象）来新建每个选项卡

myTab[N].show();

对象

进行交互 通过myTab[N] = null;
处置对象，然后从DOM中删除其各自的tab + tabContent
Tab组件（以及库中的所有其他组件）无法处理#myTab URL导航

查看documentation和wiki以获得更多信息，您可能会找到一些指南来对您有所帮助。

如何使用Bootstrap 4 / bootstrap-native-v4

1 个答案: