Angular設置第三方依賴（3）

1.安裝第三方工具

//默認情況安裝的都是最新版本
cnpm install jquery --save
cnpm install bootstrap --save
//安裝指定版本
cnpm install jquery@3.3.1 --save

安裝完成後你會在package.json文件中發現安裝的工具

2.在項目中引用

將你所安裝的第三方工添加到js屬性裏，在node_modules下有安裝工具的路徑

將jQuery引入到項目中後，ts文件仍不識別$符號，要安裝類型描述文件

Cnpm install @types/bootstrap --save-dev
//如果遇到版本問題請安裝指定版本
cnpm install @types/jquery@2.0.39 --save-dev
Cnpm install @types/bootstrap@3.3.32 --save-dev

3.簡單實例

//命令生成組件
ng g component navbar（組件名）

//導航欄的HTML
  <div class="container">
     <!--用來寫程序名字的div-->
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collaspse">
         <!--橫線-->
         <span class="icon-var"></span>
         <span class="icon-var"></span>
         <span class="icon-var"></span>
       </button>
       <a class="navbar-vrand" href="#">在線競拍</a>
     </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
         <ul class="nav navbar-nav">
           <li><a href="#">關於我們</a></li>
           <li><a href="#">聯繫我們</a></li>
           <li><a href="#">網站地圖</a></li>
         </ul>
      </div>
  </div>
</nav>

4.小結

之前導入第三方工具總是出現很多版本問題，也配置了好幾遍環境，還真是不容易啊！