Typescript 从字符串创建组件

我有一些组件要动态添加到我的页面中

我在一个配置文件

config.json

中找到了它们的名字，目前是typescript类名

MySuperComponent

。如果类名不合适，我可以在配置文件中放入任何我想要的内容

我已经尝试过一些组件解析程序的代码，但我不能传递字符串给它

这项工作：

this.resolver.resolveComponent(MySuperComponent)

这并不是：

this.resolver.resolveComponent("MySuperComponent")

---

如何从字符串实例化（并注入）组件？

您可以设置映射，并通过从字符串转换为类型的服务提供映射

import {MySuperComponent} from './MySuperComponent';

@Injectable() 
class ComponentTypes {
  types = {
    MySuperComponent: MySuperComponent
  };
  toType(name:string) {
    return types[name];
  }
}

你在哪里使用它

@Component({
  ...
  providers: [ComponentTypes],
})
class SomeComponent {
  constructor(private componentTypes:ComponentTypes) {}

  addDynamicComponent() {
    ...
    this.resolver.resolveComponent(this.componentTypes.toType("MySuperComponent"))

  }
}

---

另请参见

在Pankaj的评论之后，您可以使用

系统。导入

：

let componentPath = (...)
let componentName = 'MySuperComponent';
System.import(componentPath)
        .then(fileContents => {
            return fileContents[componentName]
        })
        .then(component => {
            this.resolver.resolveComponent(component);
        });

---

枚举我可以实例化的每个组件似乎完全没有效果。强类型就是这样工作的。其他答案请参见链接问题。我是（也应该是）一个懒惰的程序员。当我实现一个新组件时，我不希望仅仅为了解决它们而更新一个“组件库”文件。我知道你不喜欢这样，这不会自动发明更好的解决方案。Angular使用类型。类型只能通过导入或完整路径唯一标识。还有其他的选择（再次查看链接问题），但也有缺点。我知道这是一篇老文章。但最近我遇到了同样的问题。如果您找到了更好的解决方案，请与我们分享。到目前为止，我发现最好的是这个。我认为Pankaj想向您展示

System.import

；-）的使用这适用于您的情况…@blue112您可以使用类似的

require

；-）@你到底是什么意思？您在没有模块的情况下使用es5？在没有确定模块系统的情况下，它如何确定哪个类属于“MySuperComponent”名称？（顺便说一句，答案是“它不能”）@blue112您可以用哪个模块加载器更新您用来传输文件的问题吗，否则您将得不到答案..不要假设我使用的是systemjs。我并不特别使用任何框架或加载库。目前我正在使用webpack，但我不想被绑定到加载库。