javascript - 在 Angular 6 中使用 jQuery 和自定义 JavaScript 文件

Question

我有这个 myjs.js 文件

function slide_down(id) {
    $('#' + id).slideToggle();
}
function open_team_info(id) {
    $('#team-info-' + id).css("visibility", "visible");
    $('#team-info-' + id).css("opacity", "1");
}
function close_team_info(id) {
    $('#team-info-' + id).css("visibility", "hidden");
    $('#team-info-' + id).css("opacity", "0");
}

我想用这个函数来表示

(click)=a_function('someID')

在 HTML 中

如何在 myjs.js 文件中将此函数包含到我的组件中？

换句话说，是否有任何相关的解决方案，就像我们在纯 HTML 项目中所做的那样:

<script src="myjs.js"></script> 

PS:我有 5 天的时间使用 Angular，所以任何提示或建议都可以

Answer 1

如果您使用 Angular-Cli 创建 Angular 项目。然后，您可以在 src 文件夹中创建一个 myjs.ts 文件。

然后，为了使用这些函数，您必须先导出它们，如下所示:

export function fslideDown(id) {
  $('#' + id).slideToggle();
}
export function open_team_info(id) {
  $('#team-info-' + id).css('visibility', 'visible');
  $('#team-info-' + id).css('opacity', '1');
}
export function close_team_info(id) {
  $('#team-info-' + id).css('visibility', 'hidden');
  $('#team-info-' + id).css('opacity', '0');
}

在任何组件文件中，您可以像这样导入它们:

import { close_team_info, fslideDown, open_team_info } from '../../myjs';

然后将其用作普通功能。

希望它能按预期工作。