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

Question

我无法理解如何为angular2编写npm模块.
即使我找到了2个教程(一,二),也没有涉及如何实现一个angular2模块(@NgModule)作为npm包.

我不明白的是,什么时候我需要注入模块BrowserModule,例如？我甚至不得不用我的模块注入它,还是仅仅注入指令？

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

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

但我无法让它发挥作用.

更新:

这是我的模块ng2-flexbox-grid.ts的当前状态

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

但重要的是声明和导出模块指令.有了它,你只需导入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]
})