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

我是Angular2的新手，在使用声明类的方法时遇到了一些问题，声明类是我安装的Angular2网格库的一部分

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

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

---

看起来您希望利用Angular的依赖项注入和@ViewChild装饰器

在你的网格课上

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指令的实例，并将其注入grid成员变量。此时，您就有了一个NgGrid实例来调用您需要调用的任何东西

---

请参阅：

执行您所做的操作是否意味着现在可以在html文件中绑定addItem？如何在html中绑定NgGrid声明的函数addItem？我会很感激你的helono对这个问题不确定-完成上面的操作将为你提供NgGrid对象，它是在Angular创建组件时创建的。我将更新答案，告诉您如何在NgGrid中调用方法

 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;

   export interface NgGridConfig {
     margins?: number[];
     draggable?: boolean;
     resizable?: boolean;
     max_cols?: number;
     max_rows?: number;
     visible_cols?: number;
     visible_rows?: number;
     min_cols?: number;
     min_rows?: number;
     col_width?: number;
     row_height?: number;
     cascade?: string;
     min_width?: number;
     min_height?: number;
     fix_to_grid?: boolean;
     auto_style?: boolean;
     auto_resize?: boolean;
     maintain_ratio?: boolean;
     prefer_new?: boolean;
     zoom_on_drag?: boolean;
     limit_to_screen?: boolean;
   }

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")
  }
   .....
}