使用 Angular 6+，在 npm 中生成和发布包非常容易。 在本例中，我们将创建和发布星级组件。

设置

首先让我们创建一个新的 Angular 项目

ng new rating

然后让我们添加新的角度库。 Angular CLI 提供了一种使用以下命令在新工作区中生成新库骨架的方法。

ng g library ng-rating-bar

正如我们在这里看到的，在项目文件夹中创建了新的 ng-rating-bar 文件夹，并更新了 3 个文件。 让我们看看他们中的每一个：

• angular.json - 添加了新的 ng-rating-bar 项目（projectType 是库）

• packages.json - 添加了 ng-packagr 依赖项，用于从已编译的代码创建可以发布到 npm 的包。

注意：对于普通的应用程序 Angular 使用 @angular-devkit/build-angular:browser 来构建应用程序（你可以在 angular.json 文件中找到它）并且对于库 Angular 使用 ng-packagr

• tsconfig.json - 添加新路径，稍后将用于将库导入我们的应用程序

文件结构

新生成的库包含 public-api.ts 文件和 lib 文件夹。

lib 文件夹默认包含可以在我们的库中使用的模块、组件和服务文件。

对于我们的示例，我们不需要使用服务，因此我们可以从 lib 文件夹和 src/public.api 文件中删除它。

project/ng-rating-bar/src/public.api

/*
 * Public API Surface of ng-bar
 */// export * from './lib/ng-bar.service'; // remove this
export * from './lib/ng-bar.component';
export * from './lib/ng-bar.module';

我们的库将显示给定配置的评级。 我不会在这里包含整个代码。

```typescript
export class NgRatingBarComponent implements OnInit, OnChanges {
  @Input() ratingCount: number = 7;
  @Input() colorActive: string = '#edb867';
  @Input() colorDefault: string = '#d2d2d2';
  @Input() disabled = false;
  @Input() resetAble = false;

  @Input() control?: FormControl;

  @Input() styles: Styles = {
    fontSize: '28px',
    backgroundColor: '',
    margin: '5px',
    padding: '0'
  };;

  @Input() value: number = 5;
  @Output() valueChange: EventEmitter = new EventEmitter();
  @Output() hoverChange: EventEmitter = new EventEmitter();
  @Input() symbol = '★';

  numbers: Array = [];
  hoverIndex = -1;
  selectedValue = 0;
  halfValue = 0;
  halfIndex = -1;
  isHovered = false;
  constructor() {}

  ngOnInit() {

  ngOnChanges(changes: SimpleChanges) {
    if (changes['value'] || this.control) {
      this.initNumbers();
      this.calculateHalfValue();
    }
  }

  initNumbers() {
    this.numbers = Array(this.ratingCount).fill(0).map((x, i) => i);
    if (this.control) {
      this.selectedValue = this.control.value || 0;
    } else {
      this.selectedValue = this.value;
    }
    this.hoverIndex = this.selectedValue - 1;
  }

  enter(i: number) {
    if (this.disabled) {
      return;
    }
    this.isHovered = true;
    this.hoverIndex = i;
    this.hoverChange.emit(1 + i);
  }
  leave(i: number) {
    if (this.disabled) {
      return;
    }
    this.isHovered = false;
    this.hoverIndex = this.selectedValue - 1;
  }

  setSelected(i: number) {
    if (this.disabled) {
      return;
    }
    if (this.resetAble && this.selectedValue === i + 1) {
      this.selectedValue = 0;
    } else {
      this.selectedValue = i + 1;
    }

    if (this.control) {
      this.control.setValue(this.selectedValue || null);
      this.control.markAsTouched();
    } else {
      this.valueChange.emit(this.selectedValue);
    }
    this.isHovered = false;
    this.calculateHalfValue();
  }

  calculateHalfValue() {
    this.halfValue = Math.round(100 * (this.selectedValue - Math.floor(this.selectedValue)) );
    this.halfIndex = Math.ceil(this.selectedValue) - 1;
  }
}

```

现在我们需要导出组件

import { NgModule } from '@angular/core';
import { NgRatingBarComponent } from './ng-rating-bar.component';
import { CommonModule } from '@angular/common';@NgModule({
  declarations: [
    NgRatingBarComponent
  ],
  imports: [CommonModule],
  exports: [
    NgRatingBarComponent
  ]
})
export class NgRatingBarModule { }

我们组件的简单使用

将库导入应用程序

现在库已经准备好了，我们需要在我们的应用程序中导入和测试它。 有2种方式：

第一种方式：我们可以直接从 projects/ng-rating-bar 文件夹中导入模块

第二种方式：我们可以构建我们的库并从 ng-rating-bar 导入它（因为在 tsconfig.js 中添加了新路径）

ng build ng-rating-bar

这将在 dist/ng-rating-bar 文件夹中创建库的构建版本

当您从 Angular 应用程序的库中导入某些内容时，Angular 会查找库名称和磁盘位置之间的映射。 安装库包时，映射位于 node_modules 文件夹中。 当您构建自己的库时，它必须在您的 tsconfig 路径中找到映射。

使用 Angular CLI 生成库会自动将其路径添加到 tsconfig 文件中。 Angular CLI 使用 tsconfig 路径来告诉构建系统在哪里可以找到库。

关注七爪网，获取更多APP/小程序/网站源码资源！