這篇文章主要講解了“Angular需要狀態(tài)管理嗎”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Angular需要狀態(tài)管理嗎”吧！
創(chuàng)新互聯(lián)建站專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、鹽津網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為鹽津等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
在Angular中不是必須要狀態(tài)管理框架。
首先在 Angular 中有個 Service的概念，雖然 Angular 對于 Service 基本上什么都沒有做，連一個基類 BaseService 都沒有提供，但是以下2個特性決定了在 Angular 中會很輕松的通過 Service 實現(xiàn)一個上述的第三方。
Angular 中定義了一個 Service 后可以通過依賴注入很輕松的把這個服務(wù)注入到組件中，這樣組件就可以調(diào)用 Service 提供的各種方法；
我們可以把組件需要的狀態(tài)數(shù)據(jù)存儲在 Service 中，然后把注入的 Service 設(shè)成 public，這樣在模版中可以直接通過表達式綁定 Service 中的數(shù)據(jù) 。
基于以上 2 個特性，基本上在使用 Angular 開發(fā)應(yīng)用時一旦遇到組件之間共享數(shù)據(jù)，都可以使用 Service 輕松應(yīng)對（當(dāng)然做一個 SPA 單頁應(yīng)用，即使組件之間沒有共享數(shù)據(jù)，也建議 使用 Service 作為數(shù)據(jù)層，統(tǒng)一維護業(yè)務(wù)邏輯），官方提供的英雄編輯器示例 MessageService，就是直接公開服務(wù)在組件模版上綁定的，代碼如下，所以 Angular 不像 React 那樣必須完全依賴狀態(tài)管理框架才可以做組件之間的數(shù)據(jù)共享。：
export class MessageService {
messages: string[] = [];
add(message: string) {
this.messages.push(message);
}
clear() {
this.messages = [];
}
}
@Component({
selector: 'app-messages',
template: ——
——
})
export class AppMessagesComponent implements OnInit {
constructor(public messageService: MessageService) { }
ngOnInit() {
}
}
那么在 Angular 中使用 Service 做狀態(tài)管理會遇到哪些問題呢，如果只是很簡單的狀態(tài)通過 Service 直接管理肯定沒有任何問題，但是一旦 Service 存儲的狀態(tài)與每個組件需要展示的狀態(tài)不一致就很難處理了。比如下圖是我們經(jīng)常遇到的場景，首先項目中會有很多自定義的視圖，默認(rèn)只展示 2 個視圖，其余的視圖在更多視圖中。
我們可以很簡單把所有的視圖列表存放在 ViewService中, 針對視圖的增刪改邏輯都移動到 ViewService中, 偽代碼如下，但是有個問題就是導(dǎo)航條組件和更多視圖組件兩個組件展示的視圖數(shù)據(jù)不一樣，需要把視圖列表進行分割，導(dǎo)航條只展示 2 個視圖，其余的在更多視圖中。
class ViewService {
views: ViewInfo[];
addView(view: ViewInfo) {
// 調(diào)用 API
this.views.push(view);
}
updateView(view: ViewInfo) {
}
removeView(view: ViewInfo) {
}
}
此時要想解決這個問題怎么辦？我能想到快速解決的有兩種方式
在 ViewService 除了存儲所有的 views 外單獨存儲導(dǎo)航條的 2 個視圖 toolbarShowViews 和更多視圖 moreViews，這么做的缺點就是每次增刪改視圖后都需要重新計算這2個數(shù)組，Service 中的狀態(tài)會增多，如果有一天需求變了，所有的視圖直接顯示，顯示不下?lián)Q行，那還得回過頭來修改 ViewSevice 中的代碼，這本來是應(yīng)該是導(dǎo)航條和更多視圖組件的狀態(tài)，現(xiàn)在必須和全局的視圖狀態(tài)放在了一起，雖然可以解決問題，但是不完美；
還有一種更惡心的做法就是在導(dǎo)航條組件模版上循環(huán)所有視圖，根據(jù) index 只取前 2 個展示，更多組件模版循環(huán)所有視圖只展示后面的視圖，這種做法缺點是把邏輯代碼放到了視圖中，如果有更復(fù)雜的場景通過模版表達式未必可以做到，其二是循環(huán)了一些不需要的數(shù)據(jù)或許在某些場景下有性能損耗，至于示例中的那幾個視圖肯定沒有性能問題。
那么除了上述 2 中解決方式外還有更優(yōu)雅更好的方式么？答案就是 Observable( 可被訂閱的對象) ，當(dāng)然 Angular 框架本身就是依賴 RxJS 的，官方提供的 HttpClient Router 提供的 API 返回的都是 Observable對象。
回到這個例子上來，我們可以把 ViewService 中的 views 改成 BehaviorSubject
感謝各位的閱讀，以上就是“Angular需要狀態(tài)管理嗎”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Angular需要狀態(tài)管理嗎這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
