如何使用Angular CLI实现ng2-ui(NPM包)？

发布时间：2020-12-17 17:01:08 所属栏目：安全来源：网络整理

导读：我希望在Angular CLI中使用以下NPM包： ng2-ui SystemJS的实现指南,而不是Webpack,Angular CLI使用的是什么,我必须在这个项目中使用. 我做了什么？通过npm install ng2-ui –save安装包在app.module.ts中添加了以下行 import { Ng2UIModule } from 'ng2-ui

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

SystemJS的实现指南,而不是Webpack,Angular CLI使用的是什么,我必须在这个项目中使用.

我做了什么？

>通过npm install ng2-ui –save安装包
>在app.module.ts中添加了以下行

import { Ng2UIModule } from 'ng2-ui';

>将Ng2UIModule添加到@NgModule中的imports数组中.

到目前为止,我还没有在任何组件中使用Ng2UIModule,在进行上述操作之前,应用程序工作正常.

当我尝试通过ng服务运行应用程序时,我在控制台中收到以下错误：

ERROR in [default] C:toolstest-package.netnode_modulesng2-uidistindex.d.ts:1:31
Cannot find module 'ng2-overlay'.

ERROR in [default] C:toolstest-package.netnode_modulesng2-uidistindex.d.ts:2:32
Cannot find module 'ng2-map'.

ERROR in [default] C:toolstest-package.netnode_modulesng2-uidistindex.d.ts:3:60
Cannot find module 'ng2-popup'.

ERROR in [default] C:toolstest-package.netnode_modulesng2-uidistindex.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'}

只是我不知道如何使它在Webpack的Angular CLI版本中运行…

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

谢谢你的帮助！

解决方法

ng2-ui已更改为@ ngui / overlay 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');
  }

}

从’@ngui / overlay’添加import {NguiOverlayModule};到模块并将NguiOverlayModule添加到imports数组.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!