Angular教程

Angular 库

Angular库是为解决一般问题(例如呈现统一的用户界面,呈现数据和允许数据输入)而设计的。开发人员可以为特定领域创建通用解决方案,以适合在不同应用程序中重复使用。这些解决方案可以作为Angular库构建,并且可以作为npm软件包发布和共享。
Angular库是一个有角项目,但与Angular应用不同,因为它不能在其中运行它自己的。它已导入并在应用程序中使用。

Angular库的使用

Angular库扩展了Angular的基本功能。例如,如果要向应用程序添加反应式表单,请使用ng add @ angular/forms添加库包,然后从应用程序代码中的@ angular/forms库导入ReactiveFormsModule。 Angular Material是一个大型通用库的示例,该库提供了复杂,可重用和适应性强的UI组件。

安装库

库以npm软件包的形式发布,并与Angular CLI集成。要将可重用的库代码集成到应用程序中,我们必须安装该软件包并将所提供的功能导入我们将在其中使用的地方。

语法

ng add <lib_name>
ng add命令使用npm软件包管理器来安装库软件包,并将该软件包中包含的示意图调用到项目代码中的其他支架上,例如添加导入语句,字体,主题等。

库键入

库软件包包括.d.ts文件中的键入。如果库的软件包中不包含键入内容,并且IDE显示错误,则必须安装库的关联@ types/ 包。
例如,假设您有一个名为d1的库:
在@types/包中为安装到工作区中的库定义的
npm install d1--save
npm install @types/d1--save-dev
类型会自动添加到使用该库的项目的TypeScript配置中。默认情况下,TypeScript在node_modules/@ types文件夹中查找类型,因此您不必单独添加每个类型包。
如果库在@ types/中不包含类型,您仍然可以通过手动为其添加类型来使用它。您可以按照以下步骤进行操作:
在src/文件夹中创建一个Types.d.ts文件。该文件自动作为全局类型定义包括在内。
在src/typings.d.ts中添加以下代码。
declare module 'host' {
  export interface Host {
    protocol?: string;
    hostname?: string;
    pathname?: string;
  }
  export function parse(url: string, queryString?: string): Host;
}
在使用该库的组件或文件中添加以下代码:
import * as host from 'host';
const parsedUrl = host.parse('https://angular.io');
console.log(parsedUrl.hostname);

更新库

您可以使用ng update命令来更新库。它更新单个库的版本。 Angular CLI检查该库的最新发布版本,如果发现最新版本比您安装的版本新,请下载该版本并更新您的package.json以匹配最新版本。

语法

ng update <lib_name> 
注意: 将Angular更新到新版本时,必须确保使用的所有库都是最新的。如果库具有相互依赖性,则还必须更新它们。

如何将库添加到运行时全局范围

未导入到应用程序中的旧版JavaScript库可以添加到运行时全局中范围并加载,就像它们在脚本标记中一样。您必须使用CLI配置文件angular.json中构建目标的"脚本"和"样式"选项来配置CLI以在构建时执行此操作。
例如,要使用Bootstrap 4库,请首先使用npm软件包管理器安装该库及其依赖项:
npm install bootstrap--save
将Bootstrap CSS文件添加到"样式"数组:
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],

创建新库

您可以创建和发布自己的新库以扩展Angular功能。通常,当您需要在多个应用程序中解决同一问题(或想与其他开发人员共享解决方案)并且拥有库的候选人时。
例如: 您可以创建一个将用户发送到公司网站的按钮,该按钮将包含在公司所构建的所有应用程序中。
打开Angular CLI并使用以下语法创建新的库。

语法

ng generate library my-lib
这将在您的工作区中创建一个projects/my-lib文件夹,该文件夹在NgModule中包含一个组件和一个服务。使用" library"类型的项目更新了工作区配置文件angular.json。
"projects": {
  ...
  "my-lib": {
    "root": "projects/my-lib",
    "sourceRoot": "projects/my-lib/src",
    "projectType": "library",
    "prefix": "lib",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-ng-packagr:build",
        ...
现在,您可以使用以下命令来构建,测试和整理项目:
ng build my-lib
ng test my-lib
ng lint my-lib

昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4