使用引导程序 5 的角度中的 href 问题答案

【问题标题】：Problems with href in angular using bootstrap 5使用引导程序 5 的角度中的 href 问题
【发布时间】：2022-02-03 04:23:19
【问题描述】：

我需要在 Angular 中实现带有 boostrap 的选项卡，但显然 href 不能显示每个选项卡的内容，它只显示第一个选项卡，只是为了测试我从 bootstrap 的文档中复制并粘贴了代码，但是对于我需要实施的项目，我尝试以多种方式进行，但我做不到。我搜索了很多地方，一无所获。您是否需要做其他事情才能使该组件以 10 角工作。

为了更好地理解我，它只显示“测试 1”，当我点击其他选项卡时，它什么也不做。

<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <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="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">test 1</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">test 2</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">test 3</div>
  </div>

如果有人可以帮助我，我将非常感激，问候

【问题讨论】：

标签： angular typescript twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

您在此问题中包含了angular-ui-bootstap 标记，但您的代码示例看起来您根本没有正确使用它。您提供的代码看起来更像您想要为非 Angular 网站执行的操作。

在此处查看 Angular UI Boostrap 文档中的标签：https://angular-ui.github.io/bootstrap/versioned-docs/2.0.1/#/tabs

【讨论】：