如何使用Angular CLI实现ng2-ui(NPM软件包)?

埃里克Kránicz

我希望在Angular CLI中使用以下NPM软件包:ng2-ui

该实施指南是针对Angular CLI使用的SystemJS而非Webpack的,我必须在该项目中使用。

我已经做了什么?

  • 安装软件包 npm install ng2-ui --save
  • 增加了以下线 app.module.ts

    import { Ng2UIModule } from 'ng2-ui';
    
  • 已添加Ng2UIModule到中的imports数组@NgModule

由这点我没有使用Ng2UIModule任何的组件还的,做的上述操作的应用程序工作就好了。

当我尝试运行应用程序ng serve,我得到控制台以下错误:

ERROR in [default] C:\tools\test-package.net\node_modules\ng2-ui\dist\index.d.ts:1:31
Cannot find module 'ng2-overlay'.

ERROR in [default] C:\tools\test-package.net\node_modules\ng2-ui\dist\index.d.ts:2:32
Cannot find module 'ng2-map'.

ERROR in [default] C:\tools\test-package.net\node_modules\ng2-ui\dist\index.d.ts:3:60
Cannot find module 'ng2-popup'.

ERROR in [default] C:\tools\test-package.net\node_modules\ng2-ui\dist\index.d.ts:4:39
Cannot find module 'ng2-scrollable'.

我猜的应用程序只是缺少以下systemjs.config.js设置:

map['ng2-ui'] =  'node_modules/ng2-ui/dist';
packages['ng2-ui'] = {main: 'ng2-ui.umd.js', defaultExtension: 'js'}

只是我不知道如何使它在工作角CLI的WebPack版本...

(当前我使用Angular CLI 1.0.0-beta.17)

谢谢你的帮助!

萨钦·古普塔(Sachin Gupta)

在NG2的UI已更改为@ ngui /覆盖https://github.com/ng2-ui/overlay

这是我的示例代码。

ex.component.html

<div id='div1' class='container row'>
  Div 1


</div>

<div id="overlay" ngui-overlay-of="div1" style='background-color:black'>
  Loading data......
</div>

<div id="overlay2" ngui-overlay-of="div1" style='background-color:blue'>
  Loading data......
</div>

<button (click)="showOverlay($event)" class='btn btn-success'>Show Overlay</button>
<button (click)="hideOverlay()" class='btn btn-danger'>Hide Overlay</button>

<br /><br />
<button (click)="showOverlay2($event)" class='btn btn-success'>Show Overlay</button>
<button (click)="hideOverlay2()" class='btn btn-danger'>Hide Overlay</button>

ex.component.ts

import { Component, OnInit } from '@angular/core';
import { NguiOverlayManager } from '@ngui/overlay';
@Component({
  selector: 'app-ex',
  templateUrl: './ex.component.html',
  styleUrls: [ './ex.component.css' ],
  providers:[NguiOverlayManager]
  
})
export class ExComponent implements OnInit {

  constructor(private overManager:NguiOverlayManager) { }

  ngOnInit() {
  }

  showOverlay(event: Event) { 

    this.overManager.open('overlay',event);
  }

  hideOverlay() { 
    this.overManager.close('overlay');
  }

  showOverlay2(event: Event) {

    this.overManager.open('overlay2', event);
  }

  hideOverlay2() {
    this.overManager.close('overlay2');
  }

}

添加import { NguiOverlayModule } from '@ngui/overlay';到模块,并添加NguiOverlayModule到进口阵列。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章