angular 5，gridster 具有不同的组件

Posted 2023-05-07

【中文标题】angular 5，gridster 具有不同的组件

【英文标题】：angular 5 with gridster having different components

【发布时间】：2018-09-28 00:18:47

【问题描述】：

我正在使用 angular 5 和最新材料，并试图让 gridster 从 https://github.com/tiberiuzuld/angular-gridster2 工作

我的 html 看起来像：

 <gridster [options]="options">
                        <gridster-item [item]="item" *ngFor="let item of dashboard">
                              <app-infolet-smart-alerts [ngClass]="(smartAlertState == false) ? 'dashboard-widget-1-2' : 'dashboard-widget-2-2'" 
                                                            (onClickedExpand)="smartAlertSize($event)">
                              </app-infolet-smart-alerts>

                        </gridster-item>
                  </gridster>

相关的.ts

ngOnInit() 

     this.options = 
       itemChangeCallback: DynamicHomeComponent.itemChange,
       itemResizeCallback: DynamicHomeComponent.itemResize,
       draggable: 
         enabled: true
       
     ;

     this.dashboard = [
       cols: 1, rows: 1, y: 1, x: 1,
       cols: 1, rows: 1, y: 1, x: 1
     ];
  

options: GridsterConfig;
dashboard: Array<GridsterItem>;

问题 1. 这里的 y 和 x 是什么？假设 cols 和 rows 是单个项目要占用的 12 个 col 的数量。

我喜欢不同的组件，因为它是一个仪表板。假设定义为<app-comp1></app-comp1> 和<app-comp2></app-comp2> 那么，我的网格将如何在网格的第一个项目中呈现第一个组合，在第二个项目中呈现第二个组合？它不是我可以根据某些索引作为数组传递的图像列表。

【参考方案1】：

快速浏览 gridster github repo 中的代码，我相信 cols 和 rows 用于对象大小/表示。 y 和 x 是对象将放置在网格中的轴。

<gridster [options]="options">
  <gridster-item [item]="cols: 2, rows: 1, y: 0, x: 0">
    <app-comp1></app-comp1>
  </gridster-item>
  <gridster-item [item]="cols: 2, rows: 1, y: 3, x: 4">
     <app-comp2></app-comp2>
  </gridster-item>                  
</gridster>

【讨论】：

我想我可能错过了理解你的第二个问题。您也可以查看 ngcomponentoutlet 。 angular.io/api/common/NgComponentOutlet

我对您对第二个问题的回答更加困惑。我已经有 10 个组件，那么为什么我需要这个动态组件渲染等？简单地说我想在一个单元格中渲染一个垫子按钮，在另一个而不是垫子按钮或所有单元格中的垫子图标中渲染一个垫子图标。那么这将如何运作呢？

我建议不要循环生成每个网格项，这样您就可以自定义每个人