Javascript 有没有一种方法可以将工作HTML页面用作有角度的5/6组件？

我们正在Angular 5/6中进行一个项目，在该项目中，我们获得了预构建的HTML页面，这些页面使用jQuery、gridstack.js和CSS for UI，我们将作为组件实现。假设不可能在Angular中重写所有jQuery和JS代码，有没有办法直接在Angular中运行标签中提供的jQuery代码

我已经尝试将jQuery导入为：

import $ from 'jQuery';

以下是代码示例：

<script type="text/javascript">
  $(function () {
    $('.grid-stack').gridstack({
      width: 12
    });
    $(".accordion-toggle").click(function () {
      $(this).toggleClass("activu");
      $(".accordion-toggle").not(this).removeClass("activu");
    })
    var options = {
      float: true
    };
    $('.grid-stack').gridstack(options);
</script>

$（函数（）{
$（'.grid stack'）.gridstack({
宽度：12
});
$（“.accordion toggle”）。单击（函数（）{
$（此）.toggleClass（“activu”）；
$（“.accordion toggle”）.not（this.removeClass（“activu”）；
})
变量选项={
浮动：对
};
$（'.grid stack'）.gridstack（选项）；

这是可能的，并且可能是迁移路径上的一个很好的中间步骤

我现在正在做一个项目，我们有一个基于JQuery的应用程序。它在JS代码中有很多CSS和HTML代码来处理状态变化，并相应地改变内容和样式。它比较混乱

我们采取了许多步骤来迁移到Angular，第一步就是您所描述的。它肯定已经帮助您获得了对代码库的概述，并以比以前更易于维护的方式构造了代码

我使用HTML并将其分解为角度组件。在这一步中，我们将JQuery代码留在主AppComponent TS文件中。您只需在角度TS文件中使用JQuery，并使用

声明常量$：any；

我分解了JQuery代码，并将所有与模板相关的内容（例如，根据事件/状态更改DOM树的部分）迁移到HTML文件中

我使用了一个大的CSS文件，并将CSS规则移动到各个组件中

我检查了剩余的整个JQuery代码，并将其逐段迁移到适当的角度代码中

事实证明，这是一个可行的策略。我们首先考虑重新编写整个项目，但像这样，我们总是有一个运行版本，可以对其连续运行UI测试，并逐件迁移

---

所有这些都是说：我不认为JQuery/Angular混合是最终的解决方案，但它可以是一个很好的迁移策略。

您可以在Angular项目中使用JQuery。通常，基于JQuery的DOM操作不是Angular的标准方法，但在某些情况下，我们必须为某些功能使用JQuery插件

步骤：

在index.html中导入jQuery脚本

将插件css/js导入样式和脚本数组中的

.angular cli.json

在要使用它的组件内部，声明jQuery

declare var$：any；

直接在组件中使用。如果插件需要初始化，可以在

ngOnInit

---

>假设不可能在Angular中重写所有的jQuery和JS代码——是的，您可能应该这样做。您可以使用jQuery（和GridStack）在你的angular代码中。如果你正确使用组件，它甚至会变得不那么凌乱。问题是我的实习项目有时间限制，UI设计人员已经包含了数百个JS、jQuery和CSS文件，将它们转换为angular至少需要一个工作日。不要混合angular和jQuery/JS，这会产生很多问题。如果你愿意，go对于angular.js，这也不是很好的做法，但会节省时间。