如何将 angular.js 模块导入 Angular 应用程序？

Posted 2023-05-09

【中文标题】如何将 angular.js 模块导入 Angular 应用程序？

【英文标题】：How can I import an angular.js module into an angular application?

【发布时间】：2020-12-14 15:36:44

【问题描述】：

目标：我想将以下轮播 example 包含到 Angular 2+ 组件中。

包含此轮播的步骤涉及导入“theta”模块。我不确定这将如何与 Angular 2+ 依赖注入一起工作。以下链接中提到的说明适用于 AngularJs 应用程序：https://theta-carousel.com/api.html#add-to-angularjs-app

如何在 Angular 2+ 应用程序中使用它？

【问题讨论】：

不包含 angularjs 模块 - 将其作为简单的外部 js（jquery 插件）包含在内。

【参考方案1】：

除非有一个 NPM 包，否则你不能在 Angular2+ 中使用外部源代码，我认为它不适用于 theta-carousel。您将不得不寻找其他方法来实现轮播。

首先，也许您可​​以查看此well-articulated article。

【讨论】：

我认为这不一定是真的。您可以使用混合应用程序方法（类似于 angularjs 到 angular 迁移的工作方式），这并不理想，但目前仍然是一种选择。

【参考方案2】：

有几种方法可以将 AngularJs 外部包合并到 Angular 包中。

将其用作 jQuery 插件。这也需要 jQuery，它可以包含在 angular.json 文件中：

     "scripts": [
       "node_modules/jquery/dist/jquery.min.js",
       "src/assets/js/theta-carousel.min.js"
     ]

组件文件：

import  Component, OnInit  from '@angular/core';
declare var $: any;


export class AppComponent implements OnInit 

ngOnInit(): void 
$('.example').theta_carousel(*/options*/)

创建一个混合的 angularJs/angular 应用程序（不理想，也不推荐）。