0

在调整 GridsterItem 的大小后，我想在我的小部件组件中触发一个函数。我怎么做？我知道 Gridster2 在调整大小完成后有事件回调，但我如何使用它来触发我的小部件组件上的某些东西？

在我的布局组件中：

export class LayoutComponent implements AfterViewInit {
    options: GridsterConfig = {
      // yada yada
      itemResizeCallback: (x, y) => this.itemResized(x, y)
    };

    layout: GridsterItem[] = [];

    constructor() { }

    ngAfterViewInit(): void {
    }

    itemResized(x: any, y: any) {
      // How do I call the function doSomething() in PieWidgetComponent here?
    }

    async addItem() {
        this.layout.push({ x: 0, y: 0, cols: 1, rows: 1, widgetComponent: PieWidgetComponent });
    }
}

<gridster [options]="options" #myGrid>
    <gridster-item *ngFor="let item of layout" [item]="item">
        <ng-container *ngComponentOutlet="item.widgetComponent"></ng-container>
    </gridster-item>
</gridster>

在我的小部件组件中：

export class PieWidgetComponent implements OnInit {
    constructor() {
    }

    ngOnInit(): void {
    }

    public doSomething(): void {
      // How do I trigger this from LayoutComponent's after item has been resized?
      console.log("ALOHA");
    }
}

<div style="text-align:center; background-color: aquamarine;">
    My widget
</div>
4

0 回答 0