从字符串创建组件答案

【问题标题】：Create component from a string从字符串创建组件
【发布时间】：2016-12-02 20:33:48
【问题描述】：

我想将一些组件动态添加到我的页面中。

我在配置文件config.json 中有他们的名字，目前是打字稿类名MySuperComponent。如果类名不合适，我可以在我的配置文件中放任何我想要的东西。

我用组件解析器尝试了一些代码，但我无法将字符串传递给它。

这行得通：

this.resolver.resolveComponent(MySuperComponent)

这不是：

this.resolver.resolveComponent("MySuperComponent")

如何从 String 实例化（和注入）组件？

【问题讨论】：

我认为 Pankaj 想向您展示System.import 的用法；-) 这适用于您的情况...
@blue112 你可以用require 做类似的事情；-)
@blue112 你到底是什么意思？你使用没有模块的 es5？
在没有确定模块化系统的情况下，如何确定哪个类属于“MySuperComponent”名称？（顺便说一句，答案是“不能”）。
@blue112 能否请您更新一下您正在使用哪个模块加载器加载器来转换文件的问题，否则您将不会得到答案..

标签： typescript angular

【解决方案1】：

您可以设置地图并通过从字符串转换为类型的服务提供它

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

  }
}

另见Angular2, manually resolve a type by string/name

【讨论】：

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

【解决方案2】：

根据 Pankaj 的评论，您可以使用System.import：

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

【讨论】：

不要以为我在使用 systemjs。我并不特别使用任何框架或加载库。目前我正在使用 webpack，但我不想被绑定到加载库。