如何将 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

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

将 webflow 导出导入我的 angular assets 文件夹
使用 iframe 加载 webflow 组件 src='/assets/webflow/index.html'

Answer 2

我可以通过将 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);
    }
  }
}

Answer 3

我没有测试这个解决方案
这是对@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 导入 Angular > 9

How to import webflow into Angular > 9

webflow

angular

优化点