Question

我是角度4的新人我创建了一个名为mds.angular.bootstrap.datetimepicker的ngModule包，其中包含以下package.json

{
  "name": "mds.angular.bootstrap.datetimepicker",
  "version": "0.9.8",
  "description": "Persian and gregorian DateTimePicker with angular 4",
  "license": "MIT",
  "main": "./mds-datetimePicker.module.js",
  "types": [
    "./mds-datetimePicker.module.d.ts",
    "./assests/date.interface.d.ts",
    "./assests/day.interface.d.ts",
    "./assests/rangeDate.interface.d.ts"
  ],
  "moduleResolution": "node",
  "author": {
    "email": "mds_soft@yahoo.com",
    "name": "Mohammad Dayyan",
    "url": "https://github.com/Mds92/mds-angular-bootstrap-datetime-picker"
  },
  "repository": {
    "type": "public",
    "url": "https://github.com/Mds92/mds-angular-bootstrap-datetime-picker"
  },
  "homepage": "https://github.com/Mds92/mds-angular-bootstrap-datetime-picker",
  "dependencies": {
    "@angular/animations": "^4.1.2",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "mds.persian.calendar": "^0.9.69",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  }
}

我在npm发布了它，没关系现在我想在另一个角度4项目中使用该包所以我安装了包npm install mds.angular.bootstrap.datetimepicker --save
我用它作为以下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MdsDatetimePickerModule } from 'mds.angular.bootstrap.datetimepicker';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MdsDatetimePickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在此之前没关系，但我必须从IDate包中导入mds.angular.bootstrap.datetimepicker才能在我的组件中使用它但它抛出异常：

ERROR in D:/Sources/sample/src/app/app.component.ts (2,23): Cannot find module 'date.interface'.


import { Component } from '@angular/core';
import { IDate } from 'date.interface'; //ERROR

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Mds Angular Bootstrap DateTimePicker';
  viewInit = false;

  inLinePersianDateTimePicker = '';
  inlinePersianDatePickerChanged(selectedDate: IDate) {
    if (!this.viewInit) return;
    this.inLinePersianDateTimePicker = selectedDate.formatString;
  }

  inLineGregorianDateTimePicker = '';
  inlineGregorianDatePickerChanged(selectedDate: IDate) {
    if (!this.viewInit) return;
    this.inLineGregorianDateTimePicker = selectedDate.formatString;
  }

  popoverPersianDateTimePicker = '';
  popoverPersianDateTimePickerChanged(selectedDate: IDate) {
    if (!this.viewInit) return;
    this.popoverPersianDateTimePicker = selectedDate.formatString;
  }

  popoverGregorianDateTimePicker = '';
  popoverGregorianDateTimePickerChanged(selectedDate: IDate) {
    if (!this.viewInit) return;
    this.popoverGregorianDateTimePicker = selectedDate.formatString;
  }

  ngAfterViewInit() {
    this.viewInit = true;
  }
}

以下是IDate包

中的mds.angular.bootstrap.datetimepicker

export interface IDate {
  year: number;
  month: number;
  day: number;
  hour: number;
  minute: number;
  second: number;
  millisecond: number;
  formatString: string;
}

我应该如何在外部应用程序中使用IDate？

Answer 1

最后，我找到了解决方案：

首先：创建index.ts（我将其命名为index，您可以更改名称）并为我们要在外部库中使用的每种类型编写export。

export * from "./mds-datetimePicker.module";
export * from "./services/mds-datetime-picker-resources.service";
export * from "./components/mds-datetime-picker.component";
export * from "./components/core/mds-datetime-picker-core.component";
export * from "./assests/date.interface";
export * from "./assests/day.interface";
export * from "./assests/mds-datetime-picker.utility";
export * from "./assests/rangeDate.interface";

第二：打开命令提示符并选择package.json路径，然后编写以下命令：

tsc --declaration

您可以改为写tsc -d 此命令编译打字稿文件并创建*.d.ts个文件

最后：在package.json中添加以下行：

"main": "./index.js",
"types": "./index.d.ts"

现在，我们可以导入index.ts中的所有类型，如下所示：

import { MdsDatetimePickerModule, IDate } from 'mds.angular.bootstrap.datetimepicker';

如何在外部ngModule库中导入接口

1 个答案: