我想在Angular 2应用程序中使用Bootstrap 4和Bootstrap-native-v4来展示Tabs。(我通过angular.json文件的"scripts"值"./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js"包含bootstrap-native-v4-注意，当通过Chrome开发工具查看时，我可以看到源[scripts.js文件]中包含bootstrap-native-v4(
我使用localhost:4200/myfolder在本地运行我的应用程序，但是对于下面的代码，当我将鼠标悬停在/单击选项卡上时，URL默认为localhost:4200/#home(而不是localhost:4200/meyfolder#home(、localhost:4200/#profile(而不是本地主机:4200/myfolder#profile(等。
因此，所发生的情况是，页面会将一个帖子返回到一个不存在的URL
我已经尝试在标题中设置BaseURL，然而，尽管这修复了URL问题，但当我单击选项卡时，页面不会刷新内容。我还尝试将每个锚点的href设置为myfolder#home、myfolder#profile等。然而，尽管这修复了URL问题(没有回发(，但选项卡内容不会刷新
我真的想避免使用JQuery(因此使用bootstrap-native-v4(-大多数/所有的例子似乎都使用JQuery-我试图通过Data API(bootstrap-nadive-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>
我希望代码而不是回发到服务器，并简单地在显示相应选项卡的内容的选项卡之间切换
有人能帮忙吗？
BSN开发人员。我想说的是：我不是Angular专家，但我可以告诉你，我的库偏离了传统的jQuery方法、事件和插件结构，你需要首先考虑Native JavaScript。
假设您使用的是完全动态的内容，其中内容稍后会添加/更改/从DOM中删除，您可以尝试按照以下文档进行处理：
-
init每个新添加的带有
var myTab[N] = new Tab(element,options);的选项卡(myTab[N]/myTab1是要使用的初始化对象( -
通过方法EG
myTab[N].show();与对象交互 -
通过
myTab[N] = null;处理对象，然后从DOM中移除其相应的tab+tabContent - 选项卡组件(以及库中的所有其他组件(不处理
#myTabURL导航
查看文档和wiki以了解更多信息，您可能会找到一些指南来帮助您。