javascript - Angular2网格错误

Question

对于任何与 Javascript 相关的东西，我都是一个完全的新手，但我需要开发一个丰富的网络应用程序，并且我正在尝试使用 Typescript 学习 Angular2。

我正在使用 Angular 2(版本 2.4.2)

我正在尝试使用 angular2-grid插件

当我尝试安装它时，我得到了这个令人担忧的结果:

$ npm install angular2-grid
first-app@0.0.0 /home/nick/dev/angular2/first-app
├── UNMET PEER DEPENDENCY @angular/core@2.4.2
└── angular2-grid@0.11.2 

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN angular2-grid@0.11.2 requires a peer of @angular/core@2.0.0 but none was installed.

如果我忽略预热然后尝试使用它，我会在浏览器日志中收到此错误:

Can't bind to 'ngGrid' since it isn't a known property of 'div'.

这是我的组件:

import { Component } from '@angular/core';
import { NgGridModule } from 'angular2-grid';

@Component({
  selector: 'app-mygrid',
  template: `
  <h1>My First Angular 2 App</h1>
  <div class="grid" [ngGrid]="{\'max_cols\': 6, \'auto_resize\': true}">
    <div class="grid-item" [ngGridItem]="{\'sizex\': 2, \'sizey\': 3}">
    </div>
  </div>
  `,
  styles: []
})
export class MygridComponent implements OnInit {}

日志中的错误是否与我尝试安装angular2-grid时的警告有关？是不是没有安装？我该如何纠正这个问题？

Answer 1

在问题解决之前，这里有一个解决方法:我们将组件注入(inject)我们的 src 文件夹中，就像它是我们的组件一样(看起来像 vendoring)。

• 在您的 src 文件夹中的某处创建一个 angular2-grid 文件夹(例如，我将其放在 src/app 中)并复制粘贴 NgGrid.css、main.ts + components/directives/modules/interfaces 文件夹
• 将其导入到您的应用程序模块中:import { NgGridModule } from './angular2-grid/modules/NgGrid.module';(路径与放置 angular2grid 的位置有关，这里是在应用程序文件夹的根目录上)
• 按照存储库自述文件中的描述使用此库，但调整您的依赖路径(app.component.ts 中的示例:import { NgGridConfig, NgGridItemConfig } from "./angular2-grid/接口(interface)/INGGrid";

我们为项目做这件事:project with angular2-grid