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

Question

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

下面的代码显示了我如何获得小工具列表以及如何使用 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" class='flex-box' 并应用下面的样式。它们会自动将它们对齐到列中并且非常容易理解；只需给出链接读一读。

你想用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}
      }
    }`

如果您的问题现在变成“我如何使用模板”，那么您需要查看其他堆栈溢出 Q，因为该问题已被多次回答。您也可以参考 angular 文档，并使用 Hero's Tutorial

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