Question

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

示例导入：

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);

下面的函数演示了我想要实现的目标，但是我错过了两个概念来实现它：

如何将变量（name）放入{}？
我可以在JS文件中的| ucfirst函数中使用Angular过滤器吗？

componentImporter('header');

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

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

最后我遇到的错误是：

＆＃39;进口＆＃39;和＆＃39;出口＆＃39;可能只出现在顶层

这实际上可以发挥作用吗？

Answer 1

这实际上可以发挥作用吗？

简答：否

长答案

你看到的错误几乎说明了...... function action1(){ /usr/bin/operate $1 } function action2(){ /usr/bin/perform $1 $2 } function action1(){ /usr/bin/operate $1 } s不能嵌套在条件，循环或其他表达式中。这是ES6模块上的great article，深入探讨了这一主题。该文章中还提到的另一个有趣的说明是导入，类似于函数。

如何在{}和2）中添加名称可以像|中一样使用角度过滤器ucfirst在js文件中？

来自文章：

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

使用import中的变量会使其动态化。您正在使用的括号语法只能编写为部分import（即从给定模块导入命名导出）。如果您正在使用Rauschmayer博士的另一篇文章tree shaking，这真的很整洁。

就个人而言，我喜欢将所有导入保存在每个文件的顶部，这样可以很容易地看到该特定模块所依赖的内容。

更新

现在有dynamic import()方法。像webpack already support这样的一些捆绑包本身就是这种方法。此方法应用于动态导入模块。请注意＆＃34;动态进口＆＃34;是一个伞形主题，包含一些子主题，包括＆＃34; Code Splitting＆＃34;，＆＃34; Dynamic Module Expressions＆＃34;，以及使用逻辑来确定是否应该加载模块及其依赖项。

是否可以动态导入模块？

1 个答案:

更新