基于Angular8和Bootstrap4實(shí)現(xiàn)動(dòng)態(tài)主題切換的示例代碼-創(chuàng)新互聯(lián)

效果

遼陽(yáng)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！

首先看看效果：

本文將介紹如何基于Angular 8和Bootstrap 4來(lái)實(shí)現(xiàn)上面的主題切換效果。

設(shè)計(jì)

遵循Bootstrap的設(shè)計(jì)，我們會(huì)使用 bootswatch.com 提供的免費(fèi)主題來(lái)實(shí)現(xiàn)上面的效果。Bootswatch為前端程序員提供了多達(dá)21種免費(fèi)的Bootstrap主題，并且提供了API文檔 和 實(shí)例頁(yè)面 ，介紹如何在HTML+jQuery的環(huán)境中實(shí)現(xiàn)主題切換。其實(shí)，我們也可以使用Bootstrap官網(wǎng)提供的主題設(shè)計(jì)工具來(lái)設(shè)計(jì)自己的主題，這些自定義的主題也是可以用在本文介紹的方法里的，只需要替換相關(guān)的資源地址就可以。如果你打開(kāi)Bootswatch的API，你就會(huì)看到各種主題的元數(shù)據(jù)信息，我們可以使用其中的cssMin鏈接來(lái)替換主頁(yè)的link地址，以達(dá)到切換主題的目的。

在開(kāi)工之前，還是要做一些粗略的設(shè)計(jì)。為了簡(jiǎn)單起見(jiàn)，我使用Bootstrap的Navbar來(lái)完成這個(gè)功能，因?yàn)镹avbar的代碼可以直接從Bootstrap官網(wǎng)拷貝過(guò)來(lái)，稍微改改就行。不同的是，我將Navbar封裝在一個(gè)組件（Component）里，這樣做的好處是，可以將切換主題的功能封裝起來(lái)，以實(shí)現(xiàn)模塊化的設(shè)計(jì)。下圖展示了這一設(shè)計(jì)：

基本流程如下：

• theme.service.ts提供從Bootswatch獲取主題信息的服務(wù)
• 主應(yīng)用app.component.ts調(diào)用theme.service.ts，獲取主題信息，并將主題信息綁定到nav-bar.component.ts組件
• 第一次執(zhí)行站點(diǎn)，站點(diǎn)會(huì)使用定義在environment.ts中的默認(rèn)值作為默認(rèn)主題，當(dāng)每次切換主題時(shí)，會(huì)將所選主題綁定到nav-bar.component.ts上，用來(lái)在下拉菜單中標(biāo)注已選主題，并將所選主題名稱保存在LocalStorage，以便下次啟動(dòng)站點(diǎn)時(shí)直接應(yīng)用已選主題
• nav-bar.component.ts組件會(huì)在Navbar上的dropdown中列出所有的主題名稱，并且標(biāo)注所選主題，當(dāng)用戶點(diǎn)擊某個(gè)主題名稱時(shí)，就會(huì)觸發(fā)themeSelectionChanged事件，app.component.ts接收到這個(gè)事件后，就會(huì)替換主頁(yè)的link，完成主題設(shè)置

步驟

首先，根據(jù)Bootswatch API所返回的數(shù)據(jù)結(jié)構(gòu)，定義一個(gè)數(shù)據(jù)模型：

export class ThemeDefinition {
 name: string;
 description: string;
 thumbnail: string;
 preview: string;
 css: string;
 cssMin: string;
 cssCdn: string;
 scss: string;
 scssVariables: string;
}
 
export class Themes {
 version: String;
 themes: ThemeDefinition[];
}

分享標(biāo)題：基于Angular8和Bootstrap4實(shí)現(xiàn)動(dòng)態(tài)主題切換的示例代碼-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article14/ddoede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站排名、外貿(mào)建站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)