Angular5中狀態管理

2021-09-13 10:13:48 字數 1416 閱讀 4973

前面學習了vue,react 都有狀態管理,如vue中的vuex是全域性狀態管理,在任何元件裡都可以引用狀態管理中的資料,同樣,react中的redux和mbox也是,但遇到angular5卻不知道了。

一年前使用過angular1.x做過專案,那時全域性狀態可以使用$rootscope,也可以使用服務service實現,下面就用service方式在angular5中實現下吧

先定義狀態管理物件,需要存什麼資料,自己定義

export class userinfo 

}

然後定義service,如下

@injectable() //注入服務

export class listsservice

//設定路由顯示的狀態

setuserinfo(v)

//獲取路由顯示的狀態

getuserinfo()

}配置了service一定要在ngmodule中匯入,這樣才能在此module中有效

@ngmodule()然後就可以在component中使用了

@component(

.active

`]}) private userinfo;

constructor(private listsservice: listsservice)

}

在詳情頁中通過改變狀態來改變頁面

@component(}

返回`,

})export class detailcomponent

goback(): void

//元件銷毀時執行

ngondestroy():void

}

好了,這樣就ok了。

若有疑問,****流:654979292

Angular5基本入門

首先,確定安裝了nodejs與npm,angular 5要求node版本在6.9.x以上 npm版本在 3.x.x以上 1 安裝 angular cli npm install g angular cli or yarn global add angular cli 2 新建第乙個專案 3 啟動服務...

angular5 模組懶載入

為什麼要使用懶載入?當使用者訪問 頁面路徑的時候,才會載入對應的模組,這減少了應用啟動時載入資源的大小,頁面開啟速度快。1.建立專案 2.進入該專案裡 3.初始化專案 npm install4.執行專案 ng serve5.建立模組並且配置該模組路由 在module資料夾下分別建立user,prod...

從Angular5和ASP開始。網路核心

postinstall webpack config webpack.config.vendor.js 構建並執行專案 現在,我們的angular 5和asp。net core應用程式準備好了。我們可以在瀏覽器中執行並檢視輸出。首先,構建應用程式。成功建立構建後,執行應用程式。當我們執行angula...