Question

我在角度2中有一个问题。所以我能够使用ngFor从本地json显示{{data}}标签并显示数据。

然而，我想知道是否有一种方法来渲染存储在json中的组件选择器标签并在ng中显示它们。例如，我在我的文件中有这个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'。这仍然需要Type（导入类）而不是选择器。

最后，还有Angular 4，为了动态加载组件，您可以通过此库https://github.com/apoterenko/ngx-dynamic-template支持的多种方式选择哪种方式对您最有意义。

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

1 个答案: