Question

我使用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>

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

  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)="add('large','comp1')"，然后将其传递给服务，服务依次处理请求并在新创建的网格项中加载内容。

在Angular2和Gridster2

0 个答案: