Angular Gridster2如何在GridsterItem调整大小后触发组件内函数

核心思路是获取动态加载的Widget组件实例，在Gridster的调整大小回调中匹配到对应实例后调用目标方法，具体实现如下：

步骤1：修改模板，绑定动态组件实例（Angular 14+ 适用） #

利用Angular ngComponentOutlet 提供的ngComponentOutletInstance输出属性，将动态创建的组件实例挂载到对应的GridsterItem对象上：

<gridster [options]="options" #myGrid>
    <gridster-item *ngFor="let item of layout" [item]="item">
        <ng-container 
            *ngComponentOutlet="item.widgetComponent"
            (ngComponentOutletInstance)="item.componentInstance = $event"
        ></ng-container>
    </gridster-item>
</gridster>

步骤2：修改大小调整回调，触发组件内部方法 #

Gridster2的itemResizeCallback回调第二个参数就是你存储在layout数组中的对应GridsterItem对象，直接从对象上获取提前挂载的组件实例调用方法即可：

itemResized(gridsterItemComp: unknown, gridsterItem: any) {
  // 做类型校验，避免不同Widget没有该方法时报错
  if (gridsterItem.componentInstance && typeof gridsterItem.componentInstance.doSomething === 'function') {
    gridsterItem.componentInstance.doSomething();
  }
}

如果需要支持多种Widget统一响应调整事件，可以提前定义公共接口让所有Widget实现，保证类型安全：

// 定义公共接口
interface ResizableWidget {
  doSomething: () => void;
}

// Widget类实现接口
export class PieWidgetComponent implements OnInit, ResizableWidget {
  // 原有代码不变
}

兼容方案（Angular 14以下版本适用） #

如果你的Angular版本低于14，没有内置ngComponentOutletInstance属性，可以通过@ViewChildren查询所有动态组件容器来获取实例：

1. 给模板中动态组件容器加模板引用：

<ng-container #widgetContainer *ngComponentOutlet="item.widgetComponent"></ng-container>

2. 在LayoutComponent中查询所有容器实例：

import { ViewChildren, QueryList, NgComponentOutlet } from '@angular/core';

export class LayoutComponent implements AfterViewInit {
  @ViewChildren(NgComponentOutlet) widgetContainers!: QueryList<NgComponentOutlet>;
  // 原有代码不变
}

3. 调整回调方法匹配对应组件：

itemResized(gridsterItemComp: unknown, gridsterItem: any) {
  const itemIndex = this.layout.findIndex(item => item === gridsterItem);
  if (itemIndex < 0) return;
  const targetComponent = this.widgetContainers.toArray()[itemIndex]?._componentRef?.instance;
  if (targetComponent && typeof targetComponent.doSomething === 'function') {
    targetComponent.doSomething();
  }
}

内容的提问来源于stack exchange，提问作者Farid