Question

我在Angular2中比较新，我在使用声明类的方法时遇到了一些问题，声明类是我安装的angular2-grid库的一部分。

我已经创建了 grid.component.ts 组件，如下所示

if

grid.component.html如下：

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

我可以在我的html文件 gridConfig 中使用，该文件在grid.component.ts中创建并保存 NgGridConfig 的对象，但我无法使用方法NgGrid.d.ts。我想要使用的这个声明文件的一个方法是 addItem ，但我不知道如何在grid.component.ts中使用此方法。此外，我也无法将其绑定在我的html文件上，因为我可以绑定 grindConfig 。

下面我复制粘贴界面 INgGrid.d.ts 和指令 NgGrid.d.ts

NgGrid.d.ts：

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

INgGrid.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;

Answer 1

看起来你想利用Angular的依赖注入和@ViewChild装饰器。

在您的Grid类中，

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将在组件的视图中搜索NgGrid指令的实例，并将其注入到网格成员变量中。此时，您有一个NgGrid实例可以调用您需要调用的任何内容。

请参阅：Angular's ViewChild Documentation

如何使用声明的方法，该声明是位于我创建的组件中的节点模块中的库的一部分

1 个答案: