typescript – 在动态渲染时更改角度2中子组件的顺序

我对角度2世界有点新意,所以请原谅我这是一个天真的问题.

我想读一个json文件,其中包含我需要为页面显示的各种组件的元数据.

我需要读取这个json并按照它们在此处列出的顺序呈现子组件.

我已经成功使用了角度2提供的动态组件加载器API来动态加载for循环中的子组件.但是,还有一些其他要求使得使用此API有点复杂.

所以我正在寻找另一种方法来做同样的事情.这就像在父组件的ts文件中操作DOM一样,以按照JSON中提到的顺序获取子组件.

任何线索都会非常有帮助.
非常感谢！

PS：抱歉没有发布代码.我用我的手机发布了这个.

解决方法

如果你不想使用DynamicComponentLoader(不赞成使用具有相同限制的ViewContainerRef.createComponent()),我只看到使用包装所有可能组件的元素并仅呈现所选组件的选项

@Component({
  selector: 'wrapper-component',directives: [Cmp1,Cmp2,Cmp3,... Cmp10],template: `
    <div [ngSwitch]="type">
      <cmp1 *ngSwitchCase="'cmp1'"></cmp1>
      <cmp2 *ngSwitchCase="cmp2"></cmp2>
      <cmp3 *ngSwitchCase="cmp3"></cmp3>
      ....
      <cmp10 *ngSwitchCase="cmp4"></cmp4>
      <div *ngSwitchDefault>not supported</div>
    </div>
`})
export class WrapperComponent {
  @Input() type:string;
}

并使用它

@Component({
  selector: 'parent-cmp',template: `
    <wrapper-component *ngFor="let item of someJson" [type]="item.componentName"></wrapper-component>
  `})
export class ParentComponent {
  someJson; // assign the JSON here
}