Angular 11 HTML 模板到 Angular

Question

我一直在尝试将 Porto Admin HTML 模板转移到 Angular。 我为模板添加了 CSS 和 JS 依赖项，当我使用 index.html 中的所有 html 代码运行它时，一切正常。 一旦我将代码移动到 app.component.html 一切都会中断。 我尝试将 ViewEncapsulation 设置为 None 但这并没有改变任何东西。 我在想这可能是 angular 管道如何运行？ 我什至尝试从 app.module.ts 手动注入脚本关于可能是什么原因以及如何完成它的任何想法？ 我还将 app-root 的选择器更改为“[app-root]”并将其注入到元素中。 那也失败了。

编辑：这是一个已清理的简化代码库的存储库链接。 https://github.com/EliasKokkinos/porto-admin-angular

由于显而易见的原因，我不能分享这些资产。 但基本上，如果你将 html 从 app-root (app.component.html) 移动到 index.html，它就可以正常工作。

Answer 1

2 个问题，制作 Porto 管理模板的人在其 html 中有随机脚本段，出于安全原因，该脚本段不在组件内运行。 最后看起来 app-root 是在索引脚本之后添加的，所以一些 JS 查找失败。

要点：

1. Angular 2/6-11 组件阻止来自 .html 的脚本以确保安全。

2. And what seems to be the case is that Angular creates the page from the index.html and then load what is under app-root, so the JS files that aimed at elements via id, class, name execute before the rest of the document is插入，因此失败。 我对文件进行了 AfterViewInit 注入

    ngAfterViewInit(): void { let script: any = []; let sources: any[]; sources = [ "/assets/js/theme.js", "/assets/js/theme.init.js", "/assets/js/examples/examples.dashboard.js" ] for (let index = 0; index < sources.length; index++) { script[index] = document.createElement('script'); document.body.appendChild(script[index]); script[index].id = "dynamic-assets" + index; script[index].src = sources[index]; } }