引导导航栏中的角度路由器链接答案

【问题标题】：Angular router link in bootstrap navbar引导导航栏中的角度路由器链接
【发布时间】：2017-11-16 17:12:12
【问题描述】：

您好，我的链接没有显示为选项卡（使用 Bootstrap 4 和 Angular 5）。我只得到一个简单的链接。这变得非常简单，但这是第一次使用引导程序...... 非常感谢！

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

【问题讨论】：

试试getbootstrap.com/docs/4.0/components/navs顶部的例子。根据您的代码，您似乎正在使用自定义 nav 组件。我至少会尝试基本的 Bootstrap 样式，以确保在尝试这条路线之前可以正常工作。

标签： angular bootstrap-4 angular-router angular5

【解决方案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>

【讨论】：

这可行，尽管这不是我打算使用 Bootstrap 的方式。我在 package.json 和 angular.cli.json 中有 "bootstrap": "^4.0.0-beta.2" 我有 "styles": [ "../node_modules/bootstrap/scss/bootstrap.scss", "styles.scss" ] 所以我想我不应该调用 cdn，因为我希望组件 scss文件将从 global.scss 文件中获取该文件 - 但是如果我删除指向 cdn 的链接，则会出现样式丢失。
你应该为那个问题做一个新的问题。（我对 Angular 了解不多）