codecamp

Angular 使用已发布的库

安装库

这些库都是作为 npm 包发布的,它们通常都带有一些与 Angular CLI 集成好的原理图。要把可复用的库代码集成到应用中,你需要安装该软件包并在使用时导入它提供的功能。对于大多数已发布的 Angular 库,你可以使用 Angular CLI 的 ​ng add <lib_name>​ 命令。

Angular CLI 的 ​ng add​ 命令使用包管理器来安装库包,并调用该包中的原理图在项目代码中的添加脚手架。这些包管理器包括 npm 或 yarn。项目代码中的额外脚手架包括 import 语句、fonts 和 themes。

已发布的库通常会提供一个 ​README ​文件或其它文档来介绍如何把该库添加到你的应用中。例子可参阅 Angular Material 文档。

库的类型信息

通常,库包中会在 ​.d.ts​ 文件中包含类型信息。参阅 ​node_modules/@angular/material​ 中的例子。如果库包中没有包含类型信息并且你的 IDE 报错,你可能需要安装与该库关联的 ​@types/<lib_name>​ 包。

比如,假设你有一个名为 ​d3 ​的库:

npm install d3 --save
npm install @types/d3 --save-dev

已安装到工作区中的 ​@types/​ 包中所定义的类型,会自动添加到使用该库的项目的 TypeScript 配置文件中。TypeScript 默认就会在 ​node_modules/@types​ 文件夹中查找类型,所以你不必单独添加每一个类型包。

如果某个库没有 ​@types/​ 类型信息,你仍然可以手动为它添加一些类型信息。为此你要:

  1. 在 ​src/​ 文件夹中创建一个 ​typings.d.ts​ 文件。该文件会自动包含在全局类型定义中。
  2. 在 ​src/typings.d.ts​ 中添加如下代码。
  3. declare module 'host' {
      export interface Host {
        protocol?: string;
        hostname?: string;
        pathname?: string;
      }
      export function parse(url: string, queryString?: string): Host;
    }
  4. 在使用该库的组件或文件中,添加如下代码。
  5. import * as host from 'host';
    const parsedUrl = host.parse('https://angular.io');
    console.log(parsedUrl.hostname);

按需定义更多类型。

更新这些库

库的发布者可以对这些库进行更新,而这些库也有自己的依赖,所有依赖都需要保持最新。要检查已安装库的更新,请使用 ​ng update​ 命令。

使用 ​ng update <lib_name>​ 命令来单独更新某个库的版本。Angular CLI 会检查库中最新发布的版本,如果最新版本比你已安装的版本新,就会下载它并更新你的 ​package.json​ 以匹配最新版本。

如果要把 Angular 更新到新版本,你需要确保所用的库都是最新的。如果库之间相互依赖,你可能还要按特定的顺序更新它们。请参阅 Angular 升级指南以获取帮助。

把某个库添加到运行时的全局范围中

如果未将老式 JavaScript 库导入应用程序,你可以将其添加到运行时全局范围并加载它,就像将其添加到 script 标记中一样。使用工作区构建配置文件 ​angular.json​ 中此构建目标的 ​scripts ​和 ​styles ​选项,配置 Angular CLI 以便在构建时执行此操作。

比如,要使用 Bootstrap 4 库

  1. 使用 npm 包管理器安装库和相关的依赖项:
  2. npm install jquery --save
    npm install popper.js --save
    npm install bootstrap --save
  3. 在 ​angular.json​ 配置文件中,把关联的脚本文件添加到 "scripts" 数组中:
  4. "scripts": [
      "node_modules/jquery/dist/jquery.slim.js",
      "node_modules/popper.js/dist/umd/popper.js",
      "node_modules/bootstrap/dist/js/bootstrap.js"
    ],
  5. 把 ​bootstrap.css​ 文件添加到 "styles" 数组中:
  6. "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "src/styles.css"
    ],
  7. 运行或重启 ​ng serve​,看看你的应用是否正在使用 Bootstrap 4。

在你的应用中使用运行时全局库

通过 “scripts” 数组导入某个库之后,不要在 TypeScript 代码中再次使用 import 语句导入它。以下代码片段是一个示例导入语句。

import * as $ from 'jquery';

如果你使用 import 语句导入它,你将拥有该库的两个不同副本:一个作为全局库导入,另一个作为模块导入。这对于带有插件的库来说尤其糟糕,比如 JQuery,因为每个副本都包含不同的插件。

相反,运行 ​npm install @types/jquery​ Angular CLI 命令为你的库下载类型信息,然后按照库的安装步骤进行操作。这样你就可以访问该库公开的全局变量了。

定义运行时全局库的类型信息

如果你要用的全局库没有全局类型信息,就可以在 ​src/typings.d.ts​ 中手动声明它们。

比如:

declare var libraryName: any;

有些脚本扩展了其它库,比如 JQuery 插件:

$('.test').myPlugin();

在这种情况下,所安装的 ​@types/jquery​ 就不包含 ​myPlugin​,所以你需要在 ​src/typings.d.ts​ 中添加一个接口。比如:

interface JQuery {
  myPlugin(options?: any): any;
}

如果不为这个由脚本定义的扩展添加接口,IDE 就会显示错误:

[TS][Error] Property 'myPlugin' does not exist on type 'JQuery'


Angular 库概览
Angular 创建库
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Angular 开发指南

Angular 特性预览

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }