這篇文章主要講解了“Angular需要狀態(tài)管理嗎”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Angular需要狀態(tài)管理嗎”吧！

創(chuàng)新互聯(lián)建站專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、鹽津網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為鹽津等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

在Angular中不是必須要狀態(tài)管理框架。

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

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

我們可以把組件需要的狀態(tài)數(shù)據(jù)存儲(chǔ)在 Service 中，然后把注入的 Service 設(shè)成 public，這樣在模版中可以直接通過表達(dá)式綁定 Service 中的數(shù)據(jù) 。

基于以上 2 個(gè)特性，基本上在使用 Angular 開發(fā)應(yīng)用時(shí)一旦遇到組件之間共享數(shù)據(jù)，都可以使用 Service 輕松應(yīng)對(duì)（當(dāng)然做一個(gè) SPA 單頁應(yīng)用，即使組件之間沒有共享數(shù)據(jù)，也建議 使用 Service 作為數(shù)據(jù)層，統(tǒng)一維護(hù)業(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: ——

<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 做狀態(tài)管理會(huì)遇到哪些問題呢，如果只是很簡(jiǎn)單的狀態(tài)通過 Service 直接管理肯定沒有任何問題，但是一旦 Service 存儲(chǔ)的狀態(tài)與每個(gè)組件需要展示的狀態(tài)不一致就很難處理了。比如下圖是我們經(jīng)常遇到的場(chǎng)景，首先項(xiàng)目中會(huì)有很多自定義的視圖，默認(rèn)只展示 2 個(gè)視圖，其余的視圖在更多視圖中。

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

class ViewService {

    views: ViewInfo[];

    addView(view: ViewInfo) {

        // 調(diào)用 API

        this.views.push(view);

    }

    updateView(view: ViewInfo) {

    }

    removeView(view: ViewInfo) {

    }

}

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

在 ViewService 除了存儲(chǔ)所有的 views 外單獨(dú)存儲(chǔ)導(dǎo)航條的 2 個(gè)視圖 toolbarShowViews 和更多視圖 moreViews，這么做的缺點(diǎn)就是每次增刪改視圖后都需要重新計(jì)算這2個(gè)數(shù)組，Service 中的狀態(tài)會(huì)增多，如果有一天需求變了，所有的視圖直接顯示，顯示不下?lián)Q行，那還得回過頭來修改 ViewSevice 中的代碼，這本來是應(yīng)該是導(dǎo)航條和更多視圖組件的狀態(tài)，現(xiàn)在必須和全局的視圖狀態(tài)放在了一起，雖然可以解決問題，但是不完美；

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

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

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

感謝各位的閱讀，以上就是“Angular需要狀態(tài)管理嗎”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Angular需要狀態(tài)管理嗎這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

文章標(biāo)題：Angular需要狀態(tài)管理嗎
文章鏈接：http://www.rwnh.cn/article2/jsdcoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、ChatGPT、定制開發(fā)、微信小程序、網(wǎng)站制作

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)