Angular需要狀態管理嗎

這篇文章主要講解了“Angular需要狀態管理嗎”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Angular需要狀態管理嗎”吧！

在Angular中不是必須要狀態管理框架。

首先在 Angular 中有個 Service的概念，雖然 Angular 對于 Service 基本上什么都沒有做，連一個基類 BaseService 都沒有提供，但是以下2個特性決定了在 Angular 中會很輕松的通過 Service 實現一個上述的第三方。

Angular 中定義了一個 Service 后可以通過依賴注入很輕松的把這個服務注入到組件中，這樣組件就可以調用 Service 提供的各種方法；

我們可以把組件需要的狀態數據存儲在 Service 中，然后把注入的 Service 設成 public，這樣在模版中可以直接通過表達式綁定 Service 中的數據 。

基于以上 2 個特性，基本上在使用 Angular 開發應用時一旦遇到組件之間共享數據，都可以使用 Service 輕松應對（當然做一個 SPA 單頁應用，即使組件之間沒有共享數據，也建議 使用 Service 作為數據層，統一維護業務邏輯），官方提供的英雄編輯器示例 MessageService，就是直接公開服務在組件模版上綁定的，代碼如下，所以 Angular 不像 React 那樣必須完全依賴狀態管理框架才可以做組件之間的數據共享。：

export class MessageService {

  messages: string[] = [];

  add(message: string) {

    this.messages.push(message);

  }

  clear() {

    this.messages = [];

  }

}

@Component({

  selector: 'app-messages',

  template: ——

<div *ngIf="messageService.messages.length">

  <h3>Messages</h3>

  <button class="clear"

          (click)="messageService.clear()">clear</button>

  <div *ngFor='let message of messageService.messages'> {{message}} </div>

</div>

&mdash;&mdash;

})

export class AppMessagesComponent implements OnInit {

  constructor(public messageService: MessageService) { }

  ngOnInit() {

  }

}

那么在 Angular 中使用 Service 做狀態管理會遇到哪些問題呢，如果只是很簡單的狀態通過 Service 直接管理肯定沒有任何問題，但是一旦 Service 存儲的狀態與每個組件需要展示的狀態不一致就很難處理了。比如下圖是我們經常遇到的場景，首先項目中會有很多自定義的視圖，默認只展示 2 個視圖，其余的視圖在更多視圖中。

我們可以很簡單把所有的視圖列表存放在 ViewService中, 針對視圖的增刪改邏輯都移動到 ViewService中, 偽代碼如下，但是有個問題就是導航條組件和更多視圖組件兩個組件展示的視圖數據不一樣，需要把視圖列表進行分割，導航條只展示 2 個視圖，其余的在更多視圖中。

class ViewService {

    views: ViewInfo[];

    addView(view: ViewInfo) {

        // 調用 API

        this.views.push(view);

    }

    updateView(view: ViewInfo) {

    }

    removeView(view: ViewInfo) {

    }

}

此時要想解決這個問題怎么辦？我能想到快速解決的有兩種方式

在 ViewService 除了存儲所有的 views 外單獨存儲導航條的 2 個視圖 toolbarShowViews 和更多視圖 moreViews，這么做的缺點就是每次增刪改視圖后都需要重新計算這2個數組，Service 中的狀態會增多，如果有一天需求變了，所有的視圖直接顯示，顯示不下換行，那還得回過頭來修改 ViewSevice 中的代碼，這本來是應該是導航條和更多視圖組件的狀態，現在必須和全局的視圖狀態放在了一起，雖然可以解決問題，但是不完美；

還有一種更惡心的做法就是在導航條組件模版上循環所有視圖，根據 index 只取前 2 個展示，更多組件模版循環所有視圖只展示后面的視圖，這種做法缺點是把邏輯代碼放到了視圖中，如果有更復雜的場景通過模版表達式未必可以做到，其二是循環了一些不需要的數據或許在某些場景下有性能損耗，至于示例中的那幾個視圖肯定沒有性能問題。

那么除了上述 2 中解決方式外還有更優雅更好的方式么？答案就是 Observable( 可被訂閱的對象) ，當然 Angular 框架本身就是依賴 RxJS 的，官方提供的 HttpClient Router 提供的 API 返回的都是 Observable對象。

回到這個例子上來，我們可以把 ViewService 中的 views 改成 BehaviorSubject<ViewInfo[]>，BehaviorSubject 對象既可以被訂閱，又可以廣播，同時還可以存儲最后一次的數據, 操作數據后通過 views$.next(newViews) 廣播出去，然后在導航條組件中訂閱 views$ 流只取前 2 個視圖，更多視圖菜單組件訂閱取后面的視圖，如果還有其他組件顯示所有的視圖可以直接訂閱視圖列表流 viewService.views$ | async 顯示所有視圖。

感謝各位的閱讀，以上就是“Angular需要狀態管理嗎”的內容了，經過本文的學習后，相信大家對Angular需要狀態管理嗎這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！