Question

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

我的名字在配置文件config.json中，目前是typescript类名MySuperComponent。我可以在配置文件中放入任何我想要的东西，但是类名不适合。

我已经尝试了一些带有组件解析器的代码，但是我无法将字符串传递给它。

这有效：

this.resolver.resolveComponent(MySuperComponent)

这不是：

this.resolver.resolveComponent("MySuperComponent")

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

Answer 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

Answer 2

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

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

从字符串创建组件

2 个答案: