Question

我在我的应用程序中使用angular2-grid。这是链接 - https://github.com/BTMorton/angular2-grid

所以NgGrid.d.ts就像 -

import { ElementRef, Renderer, EventEmitter, DynamicComponentLoader, KeyValueDiffers, OnInit, OnDestroy, DoCheck, ViewContainerRef } from '@angular/core';
import { NgGridConfig, NgGridItemEvent } from "../interfaces/INgGrid";
import { NgGridItem } from "./NgGridItem";
export declare class NgGrid implements OnInit, DoCheck, OnDestroy {
    private _differs;
    private _ngEl;
    private _renderer;
    private _loader;
    private _containerRef;
    onDragStart: EventEmitter<NgGridItem>;
    onDrag: EventEmitter<NgGridItem>;
    onDragStop: EventEmitter<NgGridItem>;
    onResizeStart: EventEmitter<NgGridItem>;
    onResize: EventEmitter<NgGridItem>;
    onResizeStop: EventEmitter<NgGridItem>;
    onItemChange: EventEmitter<Array<NgGridItemEvent>>;
    colWidth: number;
    rowHeight: number;
    minCols: number;
    minRows: number;
    marginTop: number;
    marginRight: number;
    marginBottom: number;
    marginLeft: number;
    isDragging: boolean;
    isResizing: boolean;
    autoStyle: boolean;
    resizeEnable: boolean;
    dragEnable: boolean;
    cascade: string;
    minWidth: number;
    minHeight: number;
    private _items;
    private _draggingItem;
    private _resizingItem;
    private _resizeDirection;
    private _itemGrid;
    private _containerWidth;
    private _containerHeight;
    private _maxCols;
    private _maxRows;
    private _visibleCols;
    private _visibleRows;
    private _setWidth;
    private _setHeight;
    private _posOffset;
    private _adding;
    private _placeholderRef;
    private _fixToGrid;
    private _autoResize;
    private _differ;
    private _destroyed;
    private _maintainRatio;
    private _aspectRatio;
    private _preferNew;
    private _zoomOnDrag;
    private static CONST_DEFAULT_CONFIG;
    private _config;
    config: NgGridConfig;
    constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer, _loader: DynamicComponentLoader, _containerRef: ViewContainerRef);
    ngOnInit(): void;
    ngOnDestroy(): void;
    setConfig(config: NgGridConfig): void;
    getItemPosition(index: number): {
        col: number;
        row: number;
    };
    getItemSize(index: number): {
        x: number;
        y: number;
    };
    ngDoCheck(): boolean;
    setMargins(margins: Array<string>): void;
    enableDrag(): void;
    disableDrag(): void;
    enableResize(): void;
    disableResize(): void;
    addItem(ngItem: NgGridItem): void;
    removeItem(ngItem: NgGridItem): void;
    updateItem(ngItem: NgGridItem): void;
    triggerCascade(): void;
    private _calculateColWidth();
    private _calculateRowHeight();
    private _updateRatio();
    private _onResize(e);
    private _applyChanges(changes);
    private _onMouseDown(e);
    private _resizeStart(e);
    private _dragStart(e);
    private _zoomOut();
    private _resetZoom();
    private _onMouseMove(e);
    private _drag(e);
    private _resize(e);
    private _onMouseUp(e);
    private _dragStop(e);
    private _resizeStop(e);
    private _maxGridSize(w, h);
    private _calculateGridSize(width, height);
    private _calculateGridPosition(left, top);
    private _hasGridCollision(pos, dims);
    private _getCollisions(pos, dims);
    private _fixGridCollisions(pos, dims);
    private _cascadeGrid(pos?, dims?);
    private _fixGridPosition(pos, dims);
    private _isWithinBoundsX(pos, dims);
    private _isWithinBoundsY(pos, dims);
    private _isWithinBounds(pos, dims);
    private _addToGrid(item);
    private _removeFromGrid(item);
    private _updateSize(col?, row?);
    private _filterGrid();
    private _getMaxRow();
    private _getMaxCol();
    private _getMousePosition(e);
    private _getAbsoluteMousePosition(e);
    private _getItemFromPosition(position);
    private _createPlaceholder(item);
}

这是我的组件

import { Component, OnInit ,ViewChild } from '@angular/core';
import {NgGrid, NgGridItem} from 'angular2-grid';

@Component({
  moduleId: module.id,
  selector: 'app-grid',
  templateUrl: 'grid.component.html',
  styleUrls: ['grid.component.css'],
  directives: [NgGrid, NgGridItem]
})
export class GridComponent implements OnInit {
  constructor() { }
  ngOnInit() {

  }


}

我的HTML是 -

<div class="grid" [ngGrid]="{'max_cols': 3,'max_rows': 3, 'auto_resize': true}">
  <div class="grid-item" [ngGridItem]="{'sizex': 2, 'sizey': 2}">
    <ng-content></ng-content>
  </div>
</div>

网格工作正常。现在我想在调整网格大小时发出一个事件“onResize”。任何人都可以帮我，从控制器发出这样的事件？这样做的最佳做法是什么？

Answer 1

你可以像Günter提议的那样做，但是从原始网格传递事件：

export class GridComponent implements OnInit {
    @Output() onResize:EventEmitter = new EventEmitter();

    // ...
}

在HTML中将(onResize)="onResize.emit($event)"添加到根网格div，因此您将原始onResize事件传递给您自己的EventEmitter：

<div class="grid" [ngGrid]="{'max_cols': 3,'max_rows': 3, 'auto_resize': true}" (onResize)="onResize.emit($event)">
  <div class="grid-item" [ngGridItem]="{'sizex': 2, 'sizey': 2}">
    <ng-content></ng-content>
  </div>
</div>

在您使用GridComponent的组件的HTML中：

<app-grid (onResize)="doSomething()"></app-grid>

Answer 2

export class GridComponent implements OnInit {
    @Output() onResize:EventEmitter = new EventEmitter();

    resize() {
      this.onResize.emit('someValue#);
    }
}

然后你可以像

一样使用它

<app-grid (onResize)="doSomething()"></app-grid>

如何从组件中的指令发出事件

2 个答案: