Angular 使用已發(fā)布的庫(kù)

安裝庫(kù)

這些庫(kù)都是作為 npm 包發(fā)布的，它們通常都帶有一些與 Angular CLI 集成好的原理圖。要把可復(fù)用的庫(kù)代碼集成到應(yīng)用中，你需要安裝該軟件包并在使用時(shí)導(dǎo)入它提供的功能。對(duì)于大多數(shù)已發(fā)布的 Angular 庫(kù)，你可以使用 Angular CLI 的 ?ng add <lib_name>? 命令。

Angular CLI 的 ?ng add? 命令使用包管理器來(lái)安裝庫(kù)包，并調(diào)用該包中的原理圖在項(xiàng)目代碼中的添加腳手架。這些包管理器包括 npm 或 yarn。項(xiàng)目代碼中的額外腳手架包括 import 語(yǔ)句、fonts 和 themes。

已發(fā)布的庫(kù)通常會(huì)提供一個(gè) ?README ?文件或其它文檔來(lái)介紹如何把該庫(kù)添加到你的應(yīng)用中。例子可參閱 Angular Material 文檔。

庫(kù)的類型信息

通常，庫(kù)包中會(huì)在 ?.d.ts? 文件中包含類型信息。參閱 ?node_modules/@angular/material? 中的例子。如果庫(kù)包中沒(méi)有包含類型信息并且你的 IDE 報(bào)錯(cuò)，你可能需要安裝與該庫(kù)關(guān)聯(lián)的 ?@types/<lib_name>? 包。

比如，假設(shè)你有一個(gè)名為 ?d3 ?的庫(kù)：

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

已安裝到工作區(qū)中的 ?@types/? 包中所定義的類型，會(huì)自動(dòng)添加到使用該庫(kù)的項(xiàng)目的 TypeScript 配置文件中。TypeScript 默認(rèn)就會(huì)在 ?node_modules/@types? 文件夾中查找類型，所以你不必單獨(dú)添加每一個(gè)類型包。

如果某個(gè)庫(kù)沒(méi)有 ?@types/? 類型信息，你仍然可以手動(dòng)為它添加一些類型信息。為此你要：

1. 在 ?src/? 文件夾中創(chuàng)建一個(gè) ?typings.d.ts? 文件。該文件會(huì)自動(dòng)包含在全局類型定義中。
2. 在 ?src/typings.d.ts? 中添加如下代碼。

declare module 'host' {
  export interface Host {
    protocol?: string;
    hostname?: string;
    pathname?: string;
  }
  export function parse(url: string, queryString?: string): Host;
}

3. 在使用該庫(kù)的組件或文件中，添加如下代碼。

import * as host from 'host';
const parsedUrl = host.parse('https://angular.io');
console.log(parsedUrl.hostname);

按需定義更多類型。

更新這些庫(kù)

庫(kù)的發(fā)布者可以對(duì)這些庫(kù)進(jìn)行更新，而這些庫(kù)也有自己的依賴，所有依賴都需要保持最新。要檢查已安裝庫(kù)的更新，請(qǐng)使用 ?ng update? 命令。

使用 ?ng update <lib_name>? 命令來(lái)單獨(dú)更新某個(gè)庫(kù)的版本。Angular CLI 會(huì)檢查庫(kù)中最新發(fā)布的版本，如果最新版本比你已安裝的版本新，就會(huì)下載它并更新你的 ?package.json? 以匹配最新版本。

如果要把 Angular 更新到新版本，你需要確保所用的庫(kù)都是最新的。如果庫(kù)之間相互依賴，你可能還要按特定的順序更新它們。請(qǐng)參閱 Angular 升級(jí)指南以獲取幫助。

把某個(gè)庫(kù)添加到運(yùn)行時(shí)的全局范圍中

如果未將老式 JavaScript 庫(kù)導(dǎo)入應(yīng)用程序，你可以將其添加到運(yùn)行時(shí)全局范圍并加載它，就像將其添加到 script 標(biāo)記中一樣。使用工作區(qū)構(gòu)建配置文件 ?angular.json? 中此構(gòu)建目標(biāo)的 ?scripts ?和 ?styles ?選項(xiàng)，配置 Angular CLI 以便在構(gòu)建時(shí)執(zhí)行此操作。

比如，要使用 Bootstrap 4 庫(kù)

1. 使用 npm 包管理器安裝庫(kù)和相關(guān)的依賴項(xiàng)：

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2. 在 ?angular.json? 配置文件中，把關(guān)聯(lián)的腳本文件添加到 "scripts" 數(shù)組中：

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],

3. 把 ?bootstrap.css? 文件添加到 "styles" 數(shù)組中：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],

4. 運(yùn)行或重啟 ?ng serve?，看看你的應(yīng)用是否正在使用 Bootstrap 4。

在你的應(yīng)用中使用運(yùn)行時(shí)全局庫(kù)

通過(guò) “scripts” 數(shù)組導(dǎo)入某個(gè)庫(kù)之后，不要在 TypeScript 代碼中再次使用 import 語(yǔ)句導(dǎo)入它。以下代碼片段是一個(gè)示例導(dǎo)入語(yǔ)句。

import * as $ from 'jquery';

如果你使用 import 語(yǔ)句導(dǎo)入它，你將擁有該庫(kù)的兩個(gè)不同副本：一個(gè)作為全局庫(kù)導(dǎo)入，另一個(gè)作為模塊導(dǎo)入。這對(duì)于帶有插件的庫(kù)來(lái)說(shuō)尤其糟糕，比如 JQuery，因?yàn)槊總€(gè)副本都包含不同的插件。

相反，運(yùn)行 ?npm install @types/jquery? Angular CLI 命令為你的庫(kù)下載類型信息，然后按照庫(kù)的安裝步驟進(jìn)行操作。這樣你就可以訪問(wèn)該庫(kù)公開(kāi)的全局變量了。

定義運(yùn)行時(shí)全局庫(kù)的類型信息

如果你要用的全局庫(kù)沒(méi)有全局類型信息，就可以在 ?src/typings.d.ts? 中手動(dòng)聲明它們。

比如：

declare var libraryName: any;

有些腳本擴(kuò)展了其它庫(kù)，比如 JQuery 插件：

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

在這種情況下，所安裝的 ?@types/jquery? 就不包含 ?myPlugin?，所以你需要在 ?src/typings.d.ts? 中添加一個(gè)接口。比如：

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

如果不為這個(gè)由腳本定義的擴(kuò)展添加接口，IDE 就會(huì)顯示錯(cuò)誤：

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