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

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 的步骤，第一个步骤就是您所描述的。它肯定已经帮助您获得了代码库的概览，并以比以前更易于维护的方式构建了代码。

1. 我获取了 HTML 并将其分解为 Angular 组件。对于这一步，我们只是将 JQuery 代码留在主 AppComponent TS 文件中。您可以通过 declare const $: any; 在 Angular TS 文件中简单地使用 JQuery。
2. 我分解了 JQuery 代码，并将所有与模板相关的内容(例如，根据事件/状态更改 DOM 树的部分)迁移到 Angular HTML 文件中。
3. 我获取了一个大型 CSS 文件，并将 CSS 规则移至各个组件。
4. 我检查了整个剩余的 JQuery 代码，并逐段将其迁移到正确的 Angular 代码。

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

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