2

我正在使用 angular-gridster2 库向页面添加项目。我想在正在添加的那些项目中加载内容。元素通过一个服务放置ngFor并通过服务添加/删除。我已经查看ComponentFactoryResolver并componentRef用于加载动态内容，但所有教程都显示在单个静态目标中使用类似<div #container></div>. 但是，我的是：

<div id="grid">
    <gridster [options]="options">
    <gridster-item [item]="item" *ngFor="let item of dashboard;let i = index;">
      <div class="grid-header drag-handle">
        <span class="handle-icon"><i class="material-icons">open_with</i></span>
        <span class="close-icon" (click)="removePanel(item)"><i class="material-icons">close</i></span>
      </div>

我有一个用于“导航”选择的组件，它向页面添加了一个元素，我还想传递一个类型，该类型指示动态加载到添加的元素中的内容。目前我正在传递一个大小(click)="add(large)"，它将“大”大小数组推送到服务器以将元素放置在页面上：

  add(size,type){
    size = size || 'default';

    let newSize = this.sizeOptions[size];

    if(!this.gridElements.options.api.getNextPossiblePosition(newSize)) {
      alert('hey, no can do, buddy!');
      return false;
    }

    let tDate = new Date();

    let tSize = {
      ...newSize
    };

    this.dashboard.push(tSize);
    this.gridElements.changeGrid(this.dashboard);
  }

我的 app.component.html 看起来像这样：

<mat-sidenav-container>
    <div id="page-content">
        <app-header></app-header>
        <app-navigation></app-navigation>
        <app-grid></app-grid>
        <app-alerts #alertwindow2></app-alerts>
    </div>
</mat-sidenav-container>

再次，app-navigation并app-grid通过连接grid-component.service以允许add导航传递添加到的元素grid。我想在 click 中指定的每个网格项目上放置一个动态组件，(click)="add('large','comp1')"然后将其传递给服务，该服务反过来处理请求并将内容加载到新创建的网格项目中。

4

0 回答 0