创建打包且可主题化的 Angular Material 组件

设想

我们需要创建一个 Angular 组件 big.component.ts，它是 NPM 可安装且可主题化的。

该组件使其内部 html 包含的文本更大，并为文本使用强调主题颜色。

方法

工作区

我们将为组件和模块库使用 Angular 包格式，因此首先为库创建一个工作区。

ng new big-workspace --create-application=false
cd big-workspace

并在 VSCode 中打开项目。

code .

删除 big.component.spec.ts 、 big.service.ts 和 big.service.spec.ts 。

rm projects/big/src/lib/big.component.spec.ts
rm projects/big/src/lib/big.service.ts
rm projects/big/src/lib/big.service.spec.ts

并更新 public-api.ts。

export * from './lib/big.component';
export * from './lib/big.module';

造型

添加 big.component.scss 。

touch projects/big/src/lib/big.component.scss

声明不依赖主题的 CSS。

:host {
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 4rem;
    font-family: monospace;
}

添加主题/index.scss

mkdir projects/big/src/lib/theming
touch projects/big/src/lib/theming/index.scss

声明主题依赖的 CSS。

@import '~@angular/material/theming';@mixin big-component-theme($theme) {
$accent: map-get($theme, accent);fs-big {
    color: mat-color($accent);
    }
}

请注意，我们为组件 index.scss 命名主题文件，以便我们可以像这样导入它（这与 Angular Material 的一般做法是对称的）。

@use "@fireflysemantics/big-component-example/theming" as theme;

创建一个 big.component.html

touch projects/big/src/lib/big.component.html

把模板放进去。

<p>big works!</p>

更改 big.component.ts 的实现。

import { Component, OnInit } from '@angular/core';@Component({
    selector: 'fs-big',
    templateUrl: './big.component.html',
    styleUrls: ['./big.component.scss']
})
export class BigComponent implements OnInit {
constructor() { }
ngOnInit(): void {
    }
}

库测试构建

构建库项目。

ng build big

图书馆资产打包

为我们的更改日志注释创建一个 src/CHANGELOG.md。

touch projects/big/src/CHANGELOG.md

为了让 ng-packagr 在构建时将我们的资产复制到发行版中，我们需要更新 ng-package.json 的资产部分。

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/big",
  "assets": [
    "./src/CHANGELOG.md",
    "./src/lib/theming/index.scss"
  ],
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

更新后再次运行构建命令 ng build big。

检查 dist 文件夹。 它现在包含一个包含我们资产的 src 文件夹。

sandbox/big-workspace $ tree dist/big/src/dist/big/src/├── CHANGELOG.md
└── lib
    └── theming
        └── index.scss2 directories, 2 files

我们还需要在库 package.json 文件中为 index.scss 创建一个导出块。

{
  "name": "@fireflysemantics/big-component-example",
  "version": "0.0.1",
  "exports": {
    ".": {
      "sass": "./src/lib/theming/index.scss"
    }
  },
  "peerDependencies": {
    "@angular/common": "^13.3.0",
    "@angular/core": "^13.3.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  }
}

这使我们组件的客户能够像这样导入主题：

@use "@fireflysemantics/big-component-example/theming" as theme;

请注意，我们还更改了包名称。

"name": "@fireflysemantics/big-component-example",

本地测试

测试组件。 为此，我们将生成一个测试应用程序。

ng generate application test --style=scss --routing 

并添加角材质。

ng add @angular/material

将 big.module.ts BigModule 添加到测试应用程序 app.module.ts 中。

import { BigModule} from 'big'
@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    AppRoutingModule,
    BigModule],   providers: [],
   bootstrap: [AppComponent]
})export class AppModule { }

在 app.component.html 中声明 fs-big 组件。

<div>
   <fs-big></fs-big>
</div>

在 app.component.scss 中声明用于测试渲染的 CSS。

div {
    margin-top: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
}

在 src 中创建一个 theme.scss 文件。

@import '@angular/material/theming';$my-theme-primary: mat-palette($mat-indigo, 500, 200, 800);$my-theme-accent: mat-palette($mat-cyan);$my-theme-warn: mat-palette($mat-deep-orange, A200);$light-theme: mat-light-theme(
    $my-theme-primary,
    $my-theme-accent,
    $my-theme-warn
);

并将主题添加到 styles.scss 。

/* You can add global styles to this file, and also import other style files */

@use '@angular/material/theming' as mat;
@use '../../big/src/lib/theming' as theme;

// =====================================
// always include only once per project
// =====================================
@include mat.mat-core();
// =====================================
// import our custom themes
// =====================================
@import 'themes';
// =====================================
// Import the big component theme
// =====================================

// =====================================
// Initialize custom component themes
// =====================================
@mixin custom-components-theme($theme) {
    @include theme.big-component-theme($theme);
// ====================================
// If we had more component themes
// we could include them here as well.
// ====================================
}
@include angular-material-theme($light-theme);
@include custom-components-theme($light-theme);

我们现在可以运行 ng serve -o ，我们可以看到它渲染了我们的组件。

包装

打开库的 package.json 并更改名称。

"name": "@fireflysemantics/big-component-example",

工作区包脚本

为了构建和发布项目，添加以下 package.json 脚本。

安装全局

这将安装 @jsdevtools/version-bump-prompt 以进行语义版本控制。

"ig": "npm install -g @jsdevtools/version-bump-prompt",    

建造

"b": "ng build big",    

凹凸补丁

撞包补丁版本。

"bp": "cd projects/big && bump patch",    

发布

我们将 README.md 复制到库 README.md 上，这样我们只维护工作空间/README.md 文件。

"p": "cp README.md ./projects/big/ && npm run bp && npm run b && cd dist/big/ && npm publish"

发布到 NPM

第一次发布时，我们需要添加 --access public 以便我们第一次手动运行 p 脚本。

cp README.md ./projects/big && npm run b && cd dist/big/ && npm publish --access public

现在我们可以在 NPM 上找到 @fireflysemantics/big-component-example。