Angular7 组件未正确显示（并且切换不起作用）

Question

我已经尝试了好几个小时来了解这里发生了什么，但我没能理解。 我已经为导航栏编写了 html 正文，如下所示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-inverse">
  <div class = "container-fluid">

    <div class = "navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
   </button>
      <a href="#" class="navbar-brand">Segmentation Folks</a>
</div>

<div class = "collapse navbar-collapse" id="navHeaderCollapse">
  <ul class = "nav navbar-nav">
    <li style="text-align: center;"><a href ="#">Home</a></li>
    <li style="text-align: center;"><a href ="#">About</a></li>   
    <li style="text-align: center;"><a href ="#">Contact</a></li>
    <li style="text-align: center;"><a href ="#">Sign in</a></li>
    <li style="text-align: center;"><a href ="#">Sign up</a></li>
  </ul>
</div>
</div>
</nav>

当我从我的电脑打开 html 文件时，they all seem to be as I want.

但是当我将 html 正文复制为 Angular 组件时，the result is this。另外，小屏时的切换按钮不起作用，而在 html 中它起作用。

你知道为什么会这样吗？谢谢！

编辑！ 我已经安装了 bootstrap 3.3.6，并从这个 html 中删除了脚本和链接。然后我在index.html下面包含了以下内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

现在好像可以了！

Answer 1

使用cli to install bootstrap 代替链接。

但要安装 3.3.6，请使用以下命令：

npm install bootstrap@3.3.6

Here is working code

EDIT MAKE COLLAPSE WORK WITH ANGULAR

在ts中添加

collapsed:boolean=true;

html

<nav class="navbar navbar-inverse">
  <div class = "container-fluid">

<div class = "navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse" (click)="collapsed = !collapsed;">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
   </button>
      <a href="#" class="navbar-brand">Segmentation Folks</a>
</div>

<div class = "collapse navbar-collapse" id="navHeaderCollapse" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
  <ul class = "nav navbar-nav">
    <li style="text-align: center;"><a href ="#">Home</a></li>
    <li style="text-align: center;"><a href ="#">About</a></li>   
    <li style="text-align: center;"><a href ="#">Contact</a></li>
    <li style="text-align: center;"><a href ="#">Sign in</a></li>
    <li style="text-align: center;"><a href ="#">Sign up</a></li>
  </ul>
</div>
</div>
</nav>