Question

我们正在Angular 5/6中进行一个项目，在该项目中，我们将获得预构建的HTML页面，这些页面将jQuery，gridstack.js和CSS用于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>

Answer 1

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

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

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

我获取了HTML并将其分解为Angular组件。对于这一步，我们只是将JQuery代码保留在主AppComponent TS文件中。您只需使用declare const $: any;在Angular TS文件中使用JQuery。
我分解了JQuery代码，并将所有与模板相关的内容（例如，基于事件/状态更改DOM树的部分）迁移到了Angular HTML文件中。
我拿了一个大的CSS文件，并将CSS规则移至各个组件。
我遍历了所有剩余的 JQuery代码，然后将其逐步迁移到正确的Angular代码。

这被证明是可行的策略。我们最初考虑重新编写整个项目，但是像这样，我们一直有一个运行中的版本，可以对其连续运行UI测试并进行逐项迁移。

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

Answer 2

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

步骤：

在您的index.html中导入jQuery脚本

<script src="assets/js/jquery.min.js"></script>
在样式和脚本数组中的.angular-cli.json中导入插件css / js
在要使用它的组件内部，声明jQuery。

declare var $ : any;
直接在您的组件中使用。如果需要初始化插件，则可以在ngOnInit

有没有办法将工作的HTML页面用作Angular 5/6组件？

2 个答案: