Angular bootstrap 导航栏中的路由器 link

Question

嗨，我的 link 没有显示为选项卡（使用 Bootstrap 4 和 Angular 5）。我只得到一个普通的link。这变得非常简单，但这是第一次 bootstrap... 非常感谢！

<div>
  <nav class="navbar navbar-inverse bg-primary">
    <div class="container">
      <ul class="nav navbar-nav" routerLinkActive="active">
        <li class="nav-item active">
          <a class="nav-link" [routerLink]="['/legalTerms']">Legal Terms</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>

Answer 1

你的一些类似乎是 Bootstrap 3.

这是进行标签导航的正确方法：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
</ul>

Angular bootstrap 导航栏中的路由器 link

Angular router link in bootstrap navbar

bootstrap-4

angular

angular-router

angular5