Question

我无法理解如何为angular2编写npm模块。
即使我找到了2个教程（One，Two），也没有涉及如何将npm包实现angular2模块（@NgModule）。

我不明白，我究竟需要像BrowserModule那样注入模块？我甚至不得不用我的模块注入它，还是仅仅注入指令？

我的插件到目前为止：
- https://github.com/yves-s/ng2-flexbox-grid/tree/develop
- https://www.npmjs.com/package/ng2-flexbox-grid

目前它是@ btmorton angular2-grid的RC6的副本和更新

但我无法让它发挥作用。

更新：

的当前状态

export * from './src/directives';
export * from './src/components';
export * from './src/interfaces';

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

import {NgGrid, NgGridItem}  from './src/directives';

const mapValuesToArray = (obj) => Object.keys(obj).map(key => obj[key]);
// const directives = mapValuesToArray(directiveItems);

export default {
    directives: [NgGrid, NgGridItem]
}

@NgModule({
    declarations: [],
    imports: [
        BrowserModule,
        CommonModule
    ],
    exports: [NgGrid, NgGridItem]
})
export class Ng2FlexboxGridModule {}

更新 - 解决方案

在@Clint的帮助下，我可以把那个孩子带回家。

可能最大的问题是我不知道@NgModule究竟是如何运作的。而且我很确定如果我仔细阅读@NgModule docs

会有所帮助

重要的部分是声明和导出模块指令。有了它，您只需导入FlexboxGridModule即可使用它的导出指令。

导出：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgGrid, NgGridItem} from './src/directives';

@NgModule({
    imports: [BrowserModule],
    declarations: [NgGrid, NgGridItem],
    exports: [NgGrid, NgGridItem]
})
export class FlexboxGridModule {}

导入

import {NgModule}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent}   from './app.component';
import {FlexboxGridModule} from "ng2-flexbox-grid";

@NgModule({
    imports: [
        BrowserModule,
        FlexboxGridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

制作模块时，您应该确保它导入模块并声明它使用的组件，并导出消费者可以使用的任何内容。例如：

@NgModule({
  imports: [...modulesImConsuming],
  exports: [...modulesAndComponentsMyConsumersNeed],
  declarations: [...myModulesComponents]
})

在您的实例中，我们会（请注意declarations更改）：

@NgModule({
    declarations: [NgGrid, NgGridItem],
    imports: [
        BrowserModule,
        CommonModule
    ],
    exports: [NgGrid, NgGridItem]
})

然后要使用我们的模块，我们只需要导入它。导入模块时，我们可以访问所有组件（NgGrid，NgGridItem）以及导出的所有模块（以及导出的模块导出的所有内容等）。在你的情况下，我们会：

@NgModule({
  imports: [FlexboxGridModule]
})

Answer 2

@NgModule和npm包服务于不同的目的。 @NgModule是angular2用于封装和加载指令或动态过滤的工具。

Npm包是一种以统一方式打包和分发代码的设备。两者之间没有任何关系（npm和NgModule）。

我建议你先编写你的NgModule而不关心Npm并在你的应用程序中测试它。一旦它工作正常。然后，您可以将模块发布为npm包。

Answer 3

您不应该导入BrowserModule两次。您只应在AppModule中导入它，如下所述：Angular2 Docs。我假设你确实希望你的npm模块能够延迟加载。

如何编写Angular2 npm模块 - Angular2 RC 6

3 个答案: