如何将 webflow 导入 Angular > 9

Question

我试图将webflow生成的单个页面导入到我的angular应用程序中，一旦在子页面中访问，就会延迟加载。

我创建了一个子页面，在example-webflow.component.html中导入了webflow的html部分，并将css直接绑定到example-webflow.component.scss中我试图在angular.json中导入js，但似乎没有成功

有人已经做了这样的进口吗？

我看到它正在使用angular<=6与这个库freeformjs，但似乎不再工作

Answer 1

我没有测试这个解决方案
这是对@RamiAssi的回答，因为他的解决方案正朝着正确的方向发展，但不会让它在任何情况下都可用&此外，问题是关于懒惰加载&加载主应用程序时未加载

如果你想加载脚本&不要按照公认的答案去做，我建议如下。

将其加载到您想要的ngOnInit()中，isScriptLoaded将确保您不会多次加载相同的脚本

然后，在加载webflow html 之前，等待从脚本加载

export class AnyComponent implements OnInit {
loading = true
ngOnInit(): void {
if(this.loadScript('assets/theme/js/jquery-3.5.1.min.js') && this.loadScript('assets/theme/js/workflow.js')) 
this.loading = false
}

<ng-container *ngIf="!loading"> 
<!-- My webflow stuff -->
</ng-container>

/**
*
* @param target url to be loaded
* @returns true when loaded
*/
export const loadScript = (target: string): boolean => {
if (!isScriptLoaded(target)) {
const tag = document.createElement('script')
tag.src = target
document.body.appendChild(tag)
return true
}
return true
}
export const isScriptLoaded = (target: string): boolean => {
return document.querySelector('script[src="' + target + '"]') ? true : false
}

优化点

你可以制作一个方法来加载多个脚本

Answer 2

我仍然没有找到任何方法，所以我决定：

1. 将webflow导出导入我的角度assets文件夹
2. 使用iframe加载带有src='/assets/webflow/index.html'的webflow组件

Answer 3

我可以通过将webflow和jquery-js文件动态添加到文档头来使webflow在Angular项目中工作。初始化应用程序组件视图之后。

import { Component, AfterViewInit } from '@angular/core';
const dynamicScripts = [
'assets/theme/js/jquery-3.5.1.min.js',
'assets/theme/js/webflow.js',
];
@Component({
templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
constructor() {

}
ngAfterViewInit(): void {
this.loadScript();
}
public loadScript() {
for (let i = 0; i < dynamicScripts.length; i++) {
const node = document.createElement('script');
node.src = dynamicScripts[i];
node.type = 'text/javascript';
node.async = false;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);
}
}
}