Angular 團(tuán)隊(duì) 在 angular6 中，使得創(chuàng)建 Angular 第三方庫(kù)變得更為簡(jiǎn)單。如果你以前嘗試過(guò)操作，你會(huì)發(fā)現(xiàn)其實(shí)不是很簡(jiǎn)單！

那么流程是什么呢？

首頁(yè)我們構(gòu)建一個(gè)搭建一個(gè)簡(jiǎn)單的環(huán)境，環(huán)境里面包含一些組件和服務(wù)以及一些接口。

創(chuàng)建項(xiàng)目

1.按照官方教程，使用 ng new 命令初始化項(xiàng)目：

ng new lib-demo --prefix ld

在 angular-cli 第6個(gè)之后版本。配置文件的方式發(fā)生了相當(dāng)大變化， angular.json 現(xiàn)在代表 angular 工作空間,

你可以可以使用 ng generate application [my-app-name] 命令添加更多項(xiàng)目

你也可以通過(guò) ng generate 指令創(chuàng)建一個(gè)公共庫(kù)。

ng generate library tvmaze --prefix tm

當(dāng)然你可以使用簡(jiǎn)寫命令

ng g lib tvmaze --prefix tm

具體參照

使用 generate 在我們 angular.json 中添加一個(gè)項(xiàng)目。

在庫(kù)中創(chuàng)建一個(gè)服務(wù)

我們會(huì)發(fā)現(xiàn)tvmaze有它自己的 package.json ， tsconfig.json ， tslint.json 和 karma.conf.js ，這樣建立是有原因的，因?yàn)檫@個(gè)項(xiàng)目獨(dú)立與主應(yīng)用建立而成，它本身也有組件、服務(wù)、模塊。稍后我們添加其他的內(nèi)容。現(xiàn)在我們添加一些邏輯：

這里說(shuō)明下 provideIn: root 是 angular6 之后的新屬性，詳情見(jiàn)官網(wǎng)；如果是為了打包優(yōu)化。

在庫(kù)中創(chuàng)建一個(gè)組件

我們使用 angular-cli 來(lái)創(chuàng)建一個(gè)組件

# 使用--project 指定創(chuàng)建在那個(gè)工程中
ng generate component poster --project=tvmaze

然后這樣編輯

將組件注冊(cè)到 TvmazeModule 中，并且 exports 中是的外部能夠訪問(wèn)，還得添加 CommonModule , HttpClientModule 兩個(gè)模塊。

構(gòu)建一下

在我們使用之前，我們先構(gòu)建一下，我們 ng build 構(gòu)建，指定項(xiàng)目。

ng build tvmaze

使用庫(kù)

接下來(lái)，我們來(lái)使用剛剛構(gòu)建好的庫(kù)，一般我們采用第三方庫(kù)都是使用 import 來(lái)導(dǎo)入。

我們會(huì)發(fā)現(xiàn)庫(kù)不存在。因?yàn)檫@種方式，它是從 node_modules 尋找，所以我們要在根目錄下 tsconfig.json 添加 paths

接下來(lái)我們?cè)谥黜?xiàng)目中運(yùn)用：使用 <tm-poster> 標(biāo)簽，即可完成

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論