Question

我正在Angular2中开发一个新的应用程序，我需要在我的应用程序上动态加载一些8个控件（网格，图表，日历e.t.c）。我能够动态加载所有这些控件。但我的要求是以特定的方式显示它们，如每行两个控件，我无法做到。目前所有控件都已加载，但所有控件都在一列中，一列在另一列之下。

以下代码显示了我如何获取小工具列表以及如何使用viewContainerRef将其添加到组件中。但我无法控制这些组件的显示位置。

   for (let gadget of gadgets) {
                        this.userService.getGadgetsData(gadget.Id).subscribe(gadgetsData => {

                            switch (gadget.Name) {
                                case "PieChart":

                                    this.donughtChartData = gadgetsData.Data.Issues.map((v: any) => ({
                                        category: v.Values[0].Value,
                                        value: v.Values[2].Value,
                                    }));

                                    const factory = this.componentFactoryResolver.resolveComponentFactory(DonutComponent);
                                    const ref = this.viewContainerRef.createComponent(factory);
                                    ref.instance.donutchartData = this.donughtChartData;
                                    ref.changeDetectorRef.detectChanges();

                                    break;

Answer 1

根据你所说的我认为：您需要将 put 内容显示在模板/ .html文件中。你的打字稿运行正常，但没有在哪里查看。在模板中使用div或其他内容并显示该结果。

一旦显示出来，你就可以给那个div一个类名，而不是ex＆＃34;类=＆＃39;挠曲盒＆＃39;并应用以下样式。它们会自动将它们对齐成列，并且很容易理解;只需给链接一个读取。

您想使用flex来实现列

这里的例子：

`ul{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
     li{
      flex: 6 1 ; //the number refer to how much/fast the item will grow/shrink
       .form-control-item {//...some css}
      }
    }`

如果您的问题现在转变为“我如何使用模板＆＃39;然后你需要查看其他堆栈溢出Q，因为已经多次回答。您也可以参考角度文档，然后选择Hero's Tutorial

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在Angular2中的某个位置加载动态组件

1 个答案: