Wie man Methoden einer Deklaration verwendet, die Teil der Bibliothek in Knoten-Modulen in der von mir erstellten Komponente ist

Question

Ich bin relativ neu in Angular2 und ich habe einige Probleme mit der Verwendung der Methoden einer Deklarationsklasse, die Teil ist von angular2-grid-Bibliothek, die ich installiert habe.

Ich habe die Komponente grid.component.ts erstellt wie unten

import { Component,Directive, ElementRef, Renderer, EventEmitter, ComponentFactoryResolver, Host, ViewEncapsulation, Type, ComponentRef, KeyValueDiffer, KeyValueDiffers, OnInit, OnDestroy, DoCheck, ViewContainerRef, Output } from '@angular/core'; 
import { NgGridConfig,NgGridItemEvent, NgGridItemPosition, NgGridItemSize, NgGridRawPosition, NgGridItemDimensions} from 'angular2-grid/interfaces/INgGrid' 
import { NgGrid} from 'angular2-grid/directives/NgGrid' 
import { NgGridItem} from 'angular2-grid/directives/NgGridItem' 
import { NgGridPlaceholder} from 'angular2-grid/components/NgGridPlaceholder' 

    @Component({ 
    selector: 'pm-app', 
    templateUrl: './grid.component.html', 
    styleUrls: ['./grid.component.css'] 
    }) 

export class GridComponent { 

    text = 'Move me' 

    // I want to use the method addItem which is declared in *NgGrid.d.ts* 
    public addItem(ngItem: NgGridItem): void { 
    alert("angular2-grid will be added") 
    } 
    /*NgGridConfig is a interface which is declared also in angular2-grid which itself is located to node-modules 
    */ 
    private gridConfig = <NgGridConfig>{ 
    'margins': [5], 
    'draggable': true, 
    'resizable': true, 
    'max_cols': 5, 
    'max_rows': 0, 
    'visible_cols': 0, 
    'visible_rows': 0, 
    'min_cols': 1, 
    'min_rows': 1, 
    'col_width': 250, 
    'row_height': 250, 
    'cascade': 'up', 
    'min_width': 100, 
    'min_height': 100, 
    'fix_to_grid': false, 
    'auto_style': true, 
    'auto_resize': true, 
    'maintain_ratio': false, 
    'prefer_new': false 
    }; 
pageTitle: string = "A product for our company"; 
} 

grid.component.html ist wie folgt:

<div [ngGrid]="gridConfig"> 
     <div [ngGridItem]="{'dragHandle': '.handle', 'fixed': true, 'col': 2, 'row': 1, 'minWidth': 30}"> 
     <div class="handle">{{text}}</div> 
     </div> 
    </div> 
     <h1>{{pageTitle}}</h1> 
    <div> 
     <pm-product></pm-product> 
    </div> 

Ich bin in der Lage in meiner HTML-Datei zu verwenden, GridConfig, die in grid.component.ts erstellt wird und ein Objekt NgGridConfig halten, aber ich bin nicht in der Lage, Methoden von NgGrid.d.ts zu verwenden. Eine Methode dieser Deklarationsdatei, die ich verwenden möchte, ist addItem, aber ich weiß nicht, wie ich diese Methode in meiner grid.component.ts verwenden kann. Außerdem bin ich auch nicht in der Lage, es an meine HTML-Datei zu binden, da ich grindConfig binden kann.

Im Folgenden werde ich einfügen Kopieren Sie die Schnittstelle INgGrid.d.ts und die Richtlinie NgGrid.d.ts

NgGrid.d.ts:

import { ElementRef, Renderer, EventEmitter, ComponentFactoryResolver, KeyValueDiffers, OnInit, OnDestroy, DoCheck, ViewContainerRef } from '@angular/core'; 
import { NgGridConfig, NgGridItemEvent, NgGridItemPosition, NgGridItemSize } from '../interfaces/INgGrid'; 
import { NgGridItem } from './NgGridItem'; 
export declare class NgGrid implements OnInit, DoCheck, OnDestroy { 
private _differs; 
private _ngEl; 
private _renderer; 
private componentFactoryResolver; 
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 _limitToScreen; 
private _curMaxRow; 
private _curMaxCol; 
private _dragReady; 
private _resizeReady; 
private static CONST_DEFAULT_CONFIG; 
private _config; 
config: NgGridConfig; 
constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer, componentFactoryResolver: ComponentFactoryResolver, _containerRef: ViewContainerRef); 
ngOnInit(): void; 
ngOnDestroy(): void; 
setConfig(config: NgGridConfig): void; 
getItemPosition(index: number): NgGridItemPosition; 
getItemSize(index: number): NgGridItemSize; 
ngDoCheck(): boolean; 
setMargins(margins: Array<string>): void; 
enableDrag(): void; 
disableDrag(): void; 
enableResize(): void; 
disableResize(): void; 

**public addItem(ngItem: NgGridItem): void** 
removeItem(ngItem: NgGridItem): void; 
updateItem(ngItem: NgGridItem): void 
triggerCascade(): void; 

INgGrid.d.ts:

Answer 1

Es sieht so aus, als ob Sie Angulars Abhängigkeitsinjektion und den @ViewChild-Dekorator nutzen möchten.

In Ihrem Grid-Klasse

export class GridComponent { 

    @ViewChild(NgGrid) 
    grid: NgGrid; 

    text = 'Move me' 

    // I want to use the method addItem which is declared in *NgGrid.d.ts* 
    public addItem(ngItem: NgGridItem): void { 
    // i can now call grid.addItem(ngItem) here 
    // remember, grid is the instance of NgGrid created with your component 
    alert("angular2-grid will be added") 
    } 
    ..... 
} 

Angular Ihre Komponente Sicht für eine Instanz der NgGrid Richtlinie und injizieren sie in das Gitterelement Variable suchen. An diesem Punkt haben Sie eine Instanz von NgGrid, um anzurufen, was Sie anrufen möchten.

siehe: Angular's ViewChild Documentation

Answer 2

@Snorkpete Ich möchte diese Methode erstellen

public addItem(ngItem: NgGridItem): void { 

    ngItem.setCascadeMode(grid.cascade); 
    if (!grid._preferNew) { 
     var newPos = grid._fixGridPosition(ngItem.getGridPosition(), ngItem.getSize()); 
     ngItem.savePosition(newPos); 
    } 
    grid._items.push(ngItem); 
    grid._addToGrid(ngItem); 
    ngItem.recalculateSelf(); 
    ngItem.onCascadeEvent(); 
    grid._emitOnItemChange(); 

    alert("Add ng grid") 
} 

wo Raster die Variable als viewChild erstellt, aber es gibt mir eine Fehlermeldung, dass ich nicht die Eigenschaften zugreifen können. Zum Beispiel Kaskade ist Eigentum von NgGrid aber ich kann es nicht als grid.cascade Zugriff