在组件级别加载JS脚本(不在启动时)

Question

我的项目中有很多JS文件.我想在应用程序启动时加载特定模块或组件时加载它们.

这该怎么做？

目前,我正在加载它们index.html.另一种方法是添加它们angular-cli.json.但两种方式都会在启动时加载JS文件.但是,我需要在特定页面或模块运行时加载它们.

Answer 1

只需编写一个普通的脚本加载器

   public loadScript() {
            let body = <HTMLDivElement> document.body;
            let script = document.createElement('script');
            script.innerHTML = '';
            script.src = 'url';
            script.async = true;
            script.defer = true;
            body.appendChild(script);
    }

然后在任何你想要的地方调用它:

export class MyComponent{

    ngOnInit(){
        this.loadScript();

    }

}

但是如果这些文件是Typescript文件,你可以通过多种方式延迟加载它们:

1-使用默认模块级别延迟加载

2-使用webpack require

3-使用SystemJs模块加载器

Answer 2

我已经回答了这个问题,但有些人怎么说不能复制.

请检查此链接:https://stackoverflow.com/a/44276683/6606630

在那里你可以找到如何在组件级别的运行时加载外部JavaScript.

您必须动态创建script element,然后将其附加到DOM中.

在那个loadScript函数中我只有check existence单个js,如果你有多个js,那么你必须在逻辑上做一些改变.

如果您有任何疑问,请告诉我,我会帮助您

Answer 3

您可以使用 RouterModule 的延迟加载功能来实现这一点。

像下面这样配置你的 app.module.ts。该loadChildren-property必须指向模块的目的地和哈希后必须在模块的名称。

const routes: Routes = [
    {
        path: 'landing-page',
        loadChildren: './landing-page/landing-page.module#LandingPageModule'
    },
    {
        path: 'another-page',
        loadChildren: './another-page/another-page.module#AnotherPageModule'
    }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    ...
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果尚未完成，请将路由器插座放在 html 中：

<router-outlet></router-outlet>

然后像这样配置你的页面模块：

const routes: Routes = [
  { path: '', component: LandingPageComponent },
  ...
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    ...
  ],
  declarations: [ ... ],
  providers: [ ... ]
})
export class LandingPageModule { }

这会为每个模块生成一个块。在我的项目中，它看起来像这样：

当我打开我的网站时，我只会加载当前页面所需的块：