在 Angular 6 中使用 jQuery

debugcn 发表于 Dev

迪米特里斯·库纳拉基斯

我的 Angular 应用程序的 src 文件夹中有这个简单的 javascript 文件“my.js”

slideDown(id) {
   $('#' + id).slideToggle();
}

我想这样调用这个函数

<div class="view-details" (click)="slideDown('theID')">

我到处找，但我不知道如何将 my.js 包含到组件中

任何提示都可以

PS：Angular 新手

阮友

这是为满足您的要求而实施的工作示例项目：https : //codesandbox.io/s/nkxmjprrnp

有两个主要文件涉及执行此功能：

1.my.js文件

function slideDown(i) {
  alert(
    "You've already used this function from my.js! The passed value is: " + i
  );
 $("#abc").html("I've been changed by using jquery");
}

export default slideDown;

在app.component.ts其中导入和使用该文件my.js的文件

import { Component } from "@angular/core";
import slideDown from "../my";
@Component({
  selector: "app-root",
  template: `
  <div>
    <h2>Welcome to Stack Overflow, Dimitris Kounarakis!</h2>
    <button (click)="handleClick()">Click me</button>
    <h4 id="abc">Hello</h4>
  </div>
 `
})
export class AppComponent {
  title = "CodeSandbox";

  handleClick() {
    slideDown(2);
  }
}

在index.html文件中，我们必须使用 CDN 包含 jquery 库：

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Angular</title>
	<base href="/">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>

<body>
	<app-root></app-root>
</body>

</html>

希望这有帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。