Блог

Я хотел бы запустить функцию в своем компоненте виджета после изменения размера элемента сетки. Как мне это сделать? Я знаю, что у 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>