Question

我试图将this库集成到我的项目中。我已经能够安装npm包了。但是，现在我需要在index.html中添加一个脚本。该库仅供页面管理员使用。有没有办法让我只将脚本添加到管理员可以创建新页面的AdminComponent？否则库将被加载，但几乎从未使用过，它大约500kb，这在瞄准性能时是相当可观的。

提前谢谢。

Answer 1

虽然不是一种有角度的方式，但您可以在HTML头标记中添加<script>标记在ngOnInit

的AdminComponent生命周期挂钩中添加以下代码

const ckEditorScript = document.createElement('script');
ckEditorScript.setAttribute('src','https://cdn.ckeditor.com/4.5.11/full/ckeditor.js');
document.head.appendChild(ckEditorScript);

这样，只有在用户导航到AdminComponent

时才会下载脚本

Answer 2

我最后用前面的答案和一些额外的代码混合修复了这个问题。而不是将整个脚本添加到index.html我最终只在加载时添加了一个if语句：

window.addEventListener('load', () => {
  if(CKEDITOR) {
    const textarea = document.querySelector('textarea');
    CKEDITOR.replace(textarea);
  }
})

如果CKEDITOR存在于窗口中，那么它将初始化它。添加此代码后，我在我打算使用编辑器的组件中编写了以下内容：

const ckEditorScript = document.createElement('script');
ckEditorScript.setAttribute('src','https://cdn.ckeditor.com/4.5.11/full/ckeditor.js');
document.head.appendChild(ckEditorScript);

某些组件中的外部库Angular 5

2 个答案: