我的 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] 删除。
我来说两句