我尝试将 webflow 生成的单个页面导入到我的 Angular 应用程序中，一旦在子页面中访问，它将被延迟加载。
我创建了一个子页面，在example-webflow.component.html中导入了webflow的html部分，并将css直接绑定到example-webflow.component.scss中。 我尝试在 angular.json 中导入 js，但似乎没有用。
有人已经进行了这样的导入吗？
我看到它正在使用这个库 freeformjs 使用 angular
【问题讨论】：
我没有测试这个解决方案
这是对@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
}
你可以创建一个加载多个脚本的方法
【讨论】：
我仍然没有找到任何方法，所以我决定：
webflow 导出导入我的角度assets 文件夹src='/assets/webflow/index.html' 的 webflow 组件
【讨论】：
我可以通过将 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);
}
}
}
【讨论】：