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

Question

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

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

我需要阅读这个json并按照这里列出的顺序渲染子组件。

我已经成功使用了angular 2提供的动态组件加载器API来动态加载for循环中的子组件。但是，还有一些其他要求使这个API的使用有点复杂。

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

任何线索都会非常有用。 非常感谢！

PS：抱歉不发布代码。我已经使用我的手机发布了这个。

Answer 1

如果您不想使用array_column（不赞成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;
}