如何在Angular版本7中將外部javascript庫文件添加到特定組件

Question

我是Angular框架的新手。 當我嘗試使用Angular版本7創建HTML模板時，我遇到了有關javascript庫的問題。 我的模板上有很多頁面，例如主頁，關於，產品等。在主頁上，我需要使用jquery.slidey.js庫顯示一張幻燈片。 我正在使用腳本標簽將庫添加到home.component.html中，但未加載該庫。 所以問題是如何將外部javascript添加到特定的Angular組件中。 提前致謝

您可以在My GitHub源代碼中查看我的所有源代碼

Answer 1

看到這個。 該鏈接顯示了如何將JQuery庫安裝，設置和導入到Angular項目中，其中包含您可以輕松遵循的詳細信息和圖像。 底部還有一個工作示例。

Answer 2

這就是我解決的方法。

的index.html

<head>
 ...
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

HomeComponent.ts

 import { Component, OnInit } from '@angular/core'
 declare var $: any;


export class HomeComponent implements OnInit {

  constructor(private appService: AppService) { }

  ngOnInit() {
  }

  doSomething() {
    $("p").hide(); //example
  }

}

Answer 3

首先，安裝此軟件包npm install jquery-slider

現在，打開angular.json文件並添加以下樣式和腳本。

"styles": [ "./node_modules/jquery-slider/..CSS File Path", ], "scripts": [ "./node_modules/jquery-slider/...JS File Path" ]

如何在Angular版本7中將外部javascript庫文件添加到特定組件

問題描述

3 個解決方案

解決方案1
0 2019-02-20 01:55:32

解決方案2
0 2019-02-20 06:10:54

解決方案3
0 2019-02-20 06:17:17

如何在Angular版本7中將外部javascript庫文件添加到特定組件

問題描述

3 個解決方案

解決方案1 0 2019-02-20 01:55:32

解決方案2 0 2019-02-20 06:10:54

解決方案3 0 2019-02-20 06:17:17

解決方案1
0 2019-02-20 01:55:32

解決方案2
0 2019-02-20 06:10:54

解決方案3
0 2019-02-20 06:17:17