コンポーネント内のディレクティブからイベントを放出する方法

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); 
} 

ここに私のコンポーネントが私のHTMLがある

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() { 

    } 


} 

される -

<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

のようにそれを使用することができます：HTMLで

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

    // ... 
} 

に(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>