1

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

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

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

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

4

3 回答 3

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
}

优化点

您可以制作一个加载多个脚本的方法

于 2022-01-14T09:52:00.840 回答
0

通过将 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);
    }
  }
}
于 2022-01-13T17:07:08.487 回答
0

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

  1. 将webflow导出导入我的 Angularassets文件夹
  2. 使用 iframe 加载 webflow 组件src='/assets/webflow/index.html'
于 2021-03-14T15:59:58.847 回答