将 Javascript 脚本导入 Angular

Question

我正在尝试在我的Angular项目中使用TinyMCE-Elfinder积分器(https://github.com/nao-pon/tinymceElfinder(，我已经让我的TinyMCE胶囊组件工作了。

问题是，为了让集成器工作，我需要导入一些JS脚本。我尝试在与我的TinyMCE编辑器相同的html文件中定义它们，如下所示：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"/>
<!-- elFinder (load latest nightly) -->
<script type="text/javascript" src="https://studio-42.github.io/elFinder/demo/js/elfinder.min.js"></script>
<!-- tinyMCE -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.2.0/tinymce.min.js"></script>
<!-- tinymceElfinder -->
<script type="text/javascript" src="https://nao-pon.github.io/tinymceElfinder/tinymceElfinder.js"></script>
<editor
[(ngModel)]="content"
[init]="{
base_url: '/tinymce',
suffix: '.min',
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor link image media | 
alignleft aligncenter alignright alignjustify | 
bullist numlist outdent indent | removeformat | help | mkdir',
file_picker_callback : mceElf.browser,
images_upload_handler: mceElf.uploadHandler
}"
(onKeyUp)="onKeyUp($event)"
></editor>

然后，如代码所示，为编辑器定义了file_picker_callback和image_upload_handler。

在此之后，我按照库说明声明了用于将file_picker_callback和image_upload_handler (mceElf( 传递给我的 TS 文件的对象。所述代码如下所示：

...
declare const tinymceElfinder : any;
...
@Component({
})
export class RichEditorComponent {
mceElf = new tinymceElfinder({
url: 'php/connector.minimal.php',
uploadTargetHash: 'l1_lw',
nodeId: 'elfinder'
});
...
}

但是，当我尝试运行我的应用程序时，我收到以下错误：

ERROR Error: "Uncaught (in promise): ReferenceError: tinymceElfinder is not defined

我的猜测是Angular忽略了HTML导入。我对 Angular 相当陌生，所以我真的不知道如何正确处理这个问题。有人有解决方案吗？

Answer 1

Angular 不接受 html 模板中的 JS 脚本。尝试将所有 JS 脚本移动到 angular 项目中的索引.html文件， 在头标签的末尾

有关如何将外部JS包含到angular组件的更多信息，您可以看到这篇文章：Angular 2：将外部JS文件导入组件