Question

我是任何与Javascript相关的新手，但我需要开发一个丰富的webapp，并尝试使用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

这是一个解决方法，直到问题得到解决：我们在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文件夹的根目录下）
按照repo的自述文件中的描述使用此lib，但调整依赖关系路径（app.component.ts中的示例：import { NgGridConfig, NgGridItemConfig } from "./angular2-grid/interfaces/INgGrid";

我们为项目执行此操作：project with angular2-grid

Answer 2

你导入了＆＃34; NgGridModule＆＃34;在你的根模块中，如下例所示？

            //Root module
            import { NgModule, enableProdMode } from '@angular/core'
            import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
            import { BrowserModule }    from '@angular/platform-browser'
            import { MygridComponent  } from './mygridcomponent'
            import { NgGridModule } from 'angular2-grid';

            @NgModule({
              imports: [ BrowserModule, NgGridModule ],
              declarations: [ MygridComponent  ],
              providers: [],
              bootstrap: [ MygridComponent  ]
            })

            export class AppModule { }


            // main entry point
            import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
            import { AppModule } from './app.module';

            platformBrowserDynamic().bootstrapModule(AppModule);

Angular2网格错误

2 个答案: