Question

我有一个使用自己构建的库的角度应用程序。现在，我想创建一个通过使用config.json文件进行配置的仪表板。

config.json应该如下所示：

"dashboardElements":
   [
    {
        "selector": "lib-events-list",  // the components are within a library
        "colspan": 2,                   // config values for the dashboard
        "input_params": {
            "eventId": "12345",
            "eventName": "Testevent"    // input parameters for the angular components shown within the dashboard
         }
    },
    {
        "selector": "lib-visitors-list",
        "colspan": 2,
        "input_params": {
            "visitorId": "68865",
            "visitorName": "MaxMustermann"
        }
    }
   ]

选择器来自我的库，unput参数是这些组件的输入。即库中的lib-events-list组件如下所示：

@Component({
    selector: 'lib-events-list',
    templateUrl: './events-list.component.html',
    styleUrls: ['./events-list.component.css']
})
export class EventsListComponent implements OnInit, OnChanges {
  @Input() eventId: string;
  @Input() eventName: string;
  ...
}

所以我的问题是：用角度甚至可以吗？如何在该仪表板中创建组件？如何创建路由？

感谢您的帮助！

Answer 1

问题最少的方法是创建一个开关，用于选择器值选择要绘制的组件并在仪表板上的所有配置上循环。

<div *ngFor="let item of config">
  <div [ngSwitch]="item.selector">
    <lib-events-list *ngSwitchCase="'lib-events-list'" [eventId]="item.input_params.eventId" [eventName]="item.input_params.eventName"></lib-events-list>
    <some-other-component *ngSwitchCase="'some-other-component'"></some-other-component>
    ... and even more for each special component you can use

  </div>
</div>

Example of simple solution

我想在这里指出，您可能希望创建一些动态组件来处理这种用例，但是这种解决方案对于少量组件来说更易于实现。

Dynamic components

Answer 2

您要使用此json中的数据作为仪表板，关键是选择器，对。

从config.json构建Angular仪表板

2 个答案: