如何使用引导4/引导程序-本机-v4刷新选项卡内容？

Question

我想在一个角2应用程序中使用引导带4和引导本机-v4的Tabs。(我包括通过"./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js“文件‘angular.json’值的引导-本机-v4-注意，当通过Chrome工具查看源代码scripts.js文件时，我可以看到引导-原生-v4)

我使用localhost:4200/my文件夹在本地运行我的应用程序，但是对于下面的代码，当我悬停/单击选项卡时，URL默认为localhost:4200/#home (而不是localhost:4200/my文件夹#home)，localhost:4200/#profile (而不是localhost:4200/my文件夹#profile)等等。

所以会发生的是，页面会回发到一个不存在的URL

我尝试过在头中设置BaseURL，不过，尽管这解决了URL问题，但当我单击选项卡时，页面不会刷新内容。我还尝试将每个锚点的href设置为myfolder#home、myfolder#profile等，不过，尽管这修复了URL问题(没有回发)，但是选项卡内容不会刷新

我真的想避免使用JQuery (因此使用引导-本机-v4)-大多数/所有示例似乎都使用了JQuery -我正在尝试通过数据API (引导-本机-v4范围内的JS是OK tho)。

<!-- 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开发人员。我想说的是:我不是专业人士，但我可以看出我的库脱离了传统的jQuery方法、事件和插件结构，您需要首先考虑本地JavaScript。

假设您使用的是完全动态的内容，其中的内容后来被添加/更改/删除到DOM中，那么您可以尝试在文档之后使用它：

• init每个新添加的var myTab[N] = new Tab(element,options);选项卡(myTabN/myTab1 1是要使用的初始化对象)
• 通过方法( EG myTab[N].show(); )与对象交互
• 通过myTab[N] = null;释放对象，然后从DOM中删除相应的tab+tabContent
• Tab组件(以及库中的所有其他组件)不处理#myTab URL导航。

查看文档和维基获得更多信息，您可能会找到一些指南，希望能帮助您。