是否可以动态导入模块？ [英] Is it possible to dynamically import modules?

问题描述

我有很多进口角度组件，看起来我可以编写一个函数来简化导入。我只是不知道怎么样，但这应该很简单。

样本导入：

  import {DashboardComponent} from'./应用/组件/仪表板/ dashboard.component'; 
 angular.module（'app.components'）。component（'dashboard'，DashboardComponent）; 
 
 import {HeaderComponent} from'./app/components/header/header.component'; 
 angular.module（'app.components'）。component（'header'，HeaderComponent）; 
  

下面的函数演示了我想要实现的内容，但是我缺少两个概念，使其工作：

1. 如何将变量（名称）放在 {} ？


2. 我可以在一个函数中使用角度过滤器，如 ucfirst 在JS文件中

  componentImporter（ '报头'）; 
 
 function componentImporter（name）
 {
 import {name | ucfirst +'Component'} from'./app/components/'+ name +'/'+ name +'。 
 
 angular.module（'app.components'）。component（name，name | ucfirst +'Component'）; 
} 
  

最后我遇到的一个错误是：

'import'和'export'只能出现在顶层

这样可以实际上有效吗？

解决方案

>

简答案否

答案

您所看到的错误几乎表明这一切... import s can not嵌套在条件，循环或其他表达式中。以下是关于ES6模块的伟大的文章，深入了解该主题。该文章中提到的另一个有趣的注释是，与导出的功能类似的导入。

在{}中放一个名字，2）我可以在|中使用角度过滤器ucfirst in a js file？

从文章：

... ES6模块的结构是静态的

在导入中使用变量将使其动态。您使用的括号语法只能写入部分 import （即从给定模块导入命名导出）。如果您使用树木摇滚 a>，Rauschmayer博士的另一篇文章。

我个人喜欢将所有导入保存在每个文件的顶部，这使得很容易看出特定模块是什么依赖的

希望这有帮助！

I have many imports for angular components, and it looks like I can write a function to simplify the import. I just don't know how, but this should be simple.

Sample imports:

import {DashboardComponent} from './app/components/dashboard/dashboard.component';
angular.module('app.components').component('dashboard', DashboardComponent);

import {HeaderComponent} from './app/components/header/header.component';
angular.module('app.components').component('header', HeaderComponent);

The function below demonstrates what I want to achieve, however I'm missing two concepts to make it work:

1. How do I put a variable (name) in the {}?
2. Can I use an Angular filter in a function like | ucfirst in a JS file?

componentImporter('header');

function componentImporter(name)
{
    import {name | ucfirst + 'Component'} from './app/components/'+ name + '/' + name +'.component';

    angular.module('app.components').component(name, name | ucfirst + 'Component');
}

Finally an error I run into is:

'import' and 'export' may only appear at the top level

So can this actually ever work?

解决方案

So can this actually ever work?

Short Answer: No

Long Answer

The error you saw pretty much says it all... imports can't be nested inside conditionals, loops, or other expressions. Here's a great article on ES6 Modules that goes in depth on the subject. Another interesting note, also mentioned in that article, is that imports are hoisted, similar to functions.

How to put a name in the {} and 2) can I use an angular filter in the fuction like | ucfirst in a js file?

From the article:

...the structure of ES6 modules is static

Using a variable in the import would make it dynamic. The bracket syntax you're using can only be written to do a partial import (i.e. Importing named exports from the given module). This is really neat if you're using tree shaking, another article by Dr. Rauschmayer.

Personally I like keeping all my imports at the top of each file making it very easy to see what that particular module is dependent on.

Hope this helps!

这篇关于是否可以动态导入模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！