如何在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