Question

我是Angular框架的新手。当我尝试使用Angular版本7创建HTML模板时，我遇到了有关javascript库的问题。我的模板上有很多页面，例如主页，关于，产品等。在主页上，我需要使用jquery.slidey.js库显示一张幻灯片。我正在使用脚本标签将库添加到home.component.html中，但未加载该库。所以问题是如何将外部javascript添加到特定的Angular组件中。预先感谢

您可以在My GitHub source code上查看我的所有消息来源

Answer 1

请参见this。该链接显示了如何将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 个答案: