从多个 angular2 组件为 CRUD 应用程序创建 NPM 包
Create NPM package from multiple angular2 components for a CRUD application
我是 angular2 的新手,我已经成功地为 create/edit 创建了三个组件,查看和列出员工以及组件选择器就像 <create-employee>, <view-employee>, <list-employee>
。
我的要求是我需要在 nodejs 库中创建一个单独的 npm 包,以便 public 分发此员工模块,这样单个 npm 模块应该具有所有这三个组件。
到目前为止,我确实在 documentation 的帮助下创建了一个 npm 包。我可以将其作为节点模块安装在我的应用程序中,并成功地实现了创建员工功能。但是我缺少的是其他两个组件。我不想为视图和列表创建另外两个节点包,而是希望在单个 npm 包中提供这三个组件。
我期待的是:
app.module.ts
import { EmployeeModule } from 'employee-library';
@NgModule({
declarations: [..],
imports: [EmployeeModule],
providers: [],
bootstrap: [AppComponent]
})
user-create.component.html
<create-employee></create-employee>
user-view.component.html
<view-employee></view-employee>
user-list.component.html
<list-employee></list-employee>
将您的 3 个组件包装在 EmployeeModule
中
import { NgModule } from '@angular/core';
// import ... 3 modules
@NgModule({
declarations: [ CreateEmployee, ViewEmployee, ListEmployee ],
imports: [...],
providers: [...],
exports: [ CreateEmployee, ViewEmployee, ListEmployee ]
})
export class EmployeeModule{ }
然后public你的库,在那之后,你可以使用你的模块
import { EmployeeModule } from 'employee-library';
@NgModule({
declarations: [..],
imports: [EmployeeModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule{ }
exports : Array|any[]> Specifies a list of
directives/pipes/modules that can be used within the template of any
component that is part of an Angular module that imports this Angular
module.
文档linkhttps://angular.io/docs/ts/latest/api/core/index/NgModule-interface.html#!#exports-anchor
我是 angular2 的新手,我已经成功地为 create/edit 创建了三个组件,查看和列出员工以及组件选择器就像 <create-employee>, <view-employee>, <list-employee>
。
我的要求是我需要在 nodejs 库中创建一个单独的 npm 包,以便 public 分发此员工模块,这样单个 npm 模块应该具有所有这三个组件。
到目前为止,我确实在 documentation 的帮助下创建了一个 npm 包。我可以将其作为节点模块安装在我的应用程序中,并成功地实现了创建员工功能。但是我缺少的是其他两个组件。我不想为视图和列表创建另外两个节点包,而是希望在单个 npm 包中提供这三个组件。
我期待的是:
app.module.ts
import { EmployeeModule } from 'employee-library';
@NgModule({
declarations: [..],
imports: [EmployeeModule],
providers: [],
bootstrap: [AppComponent]
})
user-create.component.html
<create-employee></create-employee>
user-view.component.html
<view-employee></view-employee>
user-list.component.html
<list-employee></list-employee>
将您的 3 个组件包装在 EmployeeModule
import { NgModule } from '@angular/core';
// import ... 3 modules
@NgModule({
declarations: [ CreateEmployee, ViewEmployee, ListEmployee ],
imports: [...],
providers: [...],
exports: [ CreateEmployee, ViewEmployee, ListEmployee ]
})
export class EmployeeModule{ }
然后public你的库,在那之后,你可以使用你的模块
import { EmployeeModule } from 'employee-library';
@NgModule({
declarations: [..],
imports: [EmployeeModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule{ }
exports : Array|any[]> Specifies a list of directives/pipes/modules that can be used within the template of any component that is part of an Angular module that imports this Angular module.
文档linkhttps://angular.io/docs/ts/latest/api/core/index/NgModule-interface.html#!#exports-anchor