如何在 Angular 中使用/导入/集成 JS 库答案

【问题标题】：How to use / import / integrate JS library in Angular如何在 Angular 中使用/导入/集成 JS 库
【发布时间】：2018-01-29 09:19:45
【问题描述】：

这不是我第一次遇到这个问题，我很确定有几个“解决方法”可以解决这个问题。我时不时地在网上寻找一些前端设计代码，以改进我正在从事的项目的用户体验。它可能是一个轮播，一些动画等等......大多数时候这些项目都是完整的 JS，我不知道如何使用它们/调整它们/集成它们，以便它们可以在我的 Angular 4 应用程序中使用。

假设我想整合这个： https://gist.github.com/CodeMyUI/9e60eaddc810c3aac9558af52859459b

我是否应该将 .js 文件添加为外部库并弄清楚如何在我的 Angular 应用程序中使用它？
我应该找到一种在 Angular 中编写 JS 的方法吗？（TS 文件）
是否有此处未列出的解决方案可以解决问题？

【问题讨论】：

ts 文件用于定义组件/模块等。使用组件所需的其他资源只需导入它们即可。
您绝对不想在 Angular 应用程序中集成 jQuery 插件。最终，你注定会失败。寻找与 Angular 模块/插件相同的东西。
jQuery is not defined in bootstrap-sass的可能重复
@JeremyThille 好的，我可以通过使用全局变量来做到这一点，但我绝对不想这样做？
好吧，当然。为什么要混合使用 jQuery 和 Angular？它们是两个完全不同的框架，它们的工作方式并不相同。 Angular 生成 DOM，jQuery 操作它。用 jQuery 做一些事情，Angular 将不知道发生了什么。更不用说你会产生充满变通办法的超级笨拙、不可维护的代码，而且你必须加载两个库而不是一个。使用 jQuery 或 Angular，而不是同时使用两者。但是，嗯，你做你想做的:)

标签： javascript angular

【解决方案1】：

现在您需要在您的 TypeScript 中按给定名称导入它，因此在您的 TS 控件中：

import * as yourPreferedName from 'your-library';
yourPreferedName.method();

【讨论】：