是否可以使用ngFor显示多个组件选择器标签？

Question

我在angular 2中有一个问题。因此，我可以使用ngFor从本地json显示{{data}}标签并显示数据。

但是我想知道是否有一种方法可以呈现存储在json中的组件选择器标签并在ng for中显示它们。 例如，我的文件中包含以下json component.ts ：（有关该问题的说明，请参阅评论）

import { Component, OnInit } from '@angular/core';
import * as jQuery from 'jquery';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
widgets;
  constructor() { }

  ngOnInit() {

    this.widgets = [
{
  "widgetcode": "<app-analytics-widget></app-club-chooser>" //Existing component selector tag within the angular cli system
},
{
  "widgetcode": "<app-club-chooser></app-club-chooser>" //Existing component selector tag within the angular cli system
},
{
  "widgetcode": "<app-account-widget></app-account-widget>" //Existing component selector tag within the angular cli system
}



    ]
  }

}

我的component.html文件：

    <div class="DahsboardWrapper">

<!-- DashBoard Ges here -->

<!-- widget elements go here -->
<div class="DashoardHeaderClass" id="dashboard">
Dashboard Loaded
<div class="WidgetAreaWrapper">
<div class="widgets" *ngFor="let widget of widgets">


 <!-- {{widget.widgetcode}}  Not working atm..-->
<!-- this is displayng just plain text -->
</div>

<!-- This is working --> 
<app-analytics-widget></app-analytics-widget>
<app-club-chooser></app-club-chooser>
<app-account-widget></app-account-widget>

</div>
</div>

有什么建议可能有更好的方法吗？

Answer 1

您不能离开选择器。 无论如何，这在Ahead of Time（AoT）编译器的生产中都行不通，因为编译器在构建时运行，并且正是将选择器与组件和指令相匹配的原因。

如果您只考虑有限的标记集，则可以使用ngSwitch 。 您支持的每个组件都是switch case ，您可以选择通过JSON中的某些字符串属性显示哪个组件。 整个[ngSwitch]将是ngFor项目。

如果需要支持更复杂的场景，并且您正在使用Angular 4，则可以使用ngComponentOutlet' 。 这仍然需要类型（导入类）而不是选择器。

最后，也是Angular 4，对于通常动态加载组件，您可以通过此库https://github.com/apoterenko/ngx-dynamic-template支持的多种方式选择最适合您的方式。