Question

如果有几个不同类型的对象。每个对象都有自己的组件。例如，我有typeA, typeB, typeC，并且每种类型都有自己的组件typeAComponent, typeBComponent, typeCComponent。

目前我有一个很棒的ngSwitch：

    <div [ngSwitch]="variant.type">
            <div *ngSwitchCase="'typeA'">
                <typeAComponent></typeAComponent>
            </div>
            <div *ngSwitchCase="'typeB'">
                <typeBComponent></typeBComponent>
            </div>
            <div *ngSwitchCase="'typeC'">
                <typeCComponent></typeCComponent>
            </div>
     </div>

是否有可能避免这种情况？

variant.type包含组件的类型。所以也许可以定义类似`＆lt; {{variant.type +＆＃39; Component＆＃39;}}＆gt;

为什么我要这样做？在将来的版本中，还有其他类型。这个想法是只需要编写typeXComponent，不需要更改其他代码。（目前我必须在switch-case中添加一个新案例。）

在PHP中，您只需将类名称作为字符串

即可实例化一个类

 $myClassName = 'myClass';
 $instance = new $myClassName();

Angular需要类似的东西：D

有人有提示吗？

Answer 1

您可以使用ComponentType而不是字符串Class动态加载组件。您可以创建一个字典，其中包含类Name和ComponentType，您可以使用它来动态加载组件。

在动态加载其他组件的组件中

   //inject the component factory resolver 
   constructor(private componentFactoryResolver:ComponentFactoryResolver){}

   //accept a component and a viewContainerRef (where you want to load the component)
     loadComponent(component:Type, target:ViewContainerRef){          
      let componentFactory =    this.componentFactoryResolver.resolveComponentFactory(component);
      target.createComponent(componentFactory);
    }

希望这会有所帮助!!

确定应按字符串名称显示哪个组件

1 个答案: