詳解Angular16如何獲取路由參數(shù)
引言
Anguar 16 引入一個(gè)有趣的功能，可以將路由器數(shù)據(jù)直接通過(guò) @Input 來(lái)綁定，例如：QueryString，路由參數(shù)，data 靜態(tài)數(shù)據(jù)。
舊寫法
在 Angular 16 之前，需要通過(guò) ActivatedRoute 來(lái)獲取這些數(shù)據(jù)。假設(shè)有這么一個(gè)路由配置：
{
path: ':type',
component: TestComponent,
data: { role: 'admin' }
}并通過(guò)以下訪問(wèn)路由時(shí)：
/weixin?uid=1&allow=false
我們可以透過(guò)注入 ActivatedRoute 并分別從 data、params、queryParams 獲取到所需要的數(shù)據(jù)。
倘若，你想監(jiān)聽(tīng) params 數(shù)據(jù)的變化，還需要單獨(dú)為訂閱處理；
除此之外，除 data 以外，其他數(shù)據(jù)類型都是自動(dòng)轉(zhuǎn)成 string，反正到這里我已經(jīng)很煩人了。
新方式
從 Angular 16 開(kāi)始這些參數(shù)都可以自動(dòng)綁定到 @Input 輸入?yún)?shù)當(dāng)中?？梢酝ㄟ^(guò) bindToComponentInputs 激活這個(gè)有趣的新功能，就像這樣：
RouterModule.forRoot(routes, {
bindToComponentInputs: true
});
# Sandalone 版本
provideRouter([], withComponentInputBinding())寫法也非常簡(jiǎn)單：
@Input() type = '';
@Input() role = '';
@Input({ transform: numberAttribute }) uid = 0;
@Input({ transform: booleanAttribute }) allow = false; 注：transform 參數(shù)是 Angular 16.1 以上新的改進(jìn)，可以極大的簡(jiǎn)化編寫 get、set。
當(dāng)然，當(dāng)路由發(fā)生變更時(shí) @Input 也會(huì)自動(dòng)更新，你可以通過(guò) ngOnChanges 來(lái)知曉，也可以利用 get、set 寫法。
以上就是詳解Angular16如何獲取路由參數(shù)的詳細(xì)內(nèi)容，更多關(guān)于Angular16獲取路由參數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法,涉及AngularJS事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
本文主要對(duì)Angular的 $q, defer, promise進(jìn)行實(shí)例分析介紹。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
本文主要介紹 AngularJS SQL,這里給大家整理了相關(guān)資料，并提供了實(shí)例代碼,有需要的小伙伴可以參考下2016-07-07
Angular 輸入框?qū)崿F(xiàn)自定義驗(yàn)證功能
AngularJS 表單和控件可以驗(yàn)證輸入的數(shù)據(jù)。本文給大家介紹Angular 輸入框?qū)崿F(xiàn)自定義驗(yàn)證功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-02-02
詳細(xì)AngularJs4的圖片剪裁組件的實(shí)例
本篇文章主要介紹了詳細(xì)AngularJs4的圖片剪裁組件的實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
詳解angularjs中如何實(shí)現(xiàn)控制器和指令之間交互
本篇文章主要介紹了詳解angularjs中如何實(shí)現(xiàn)控制器和指令之間交互，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
AngularJS入門知識(shí)之MVW類框架的編程思想探討
這篇文章主要介紹了AngularJS入門知識(shí)之MVW類框架的編程思想探討,本文通過(guò)實(shí)現(xiàn)兩個(gè)簡(jiǎn)單的業(yè)務(wù)需求,探討AngularJS和傳統(tǒng)的JavaScript控制DOM實(shí)現(xiàn)方式的差別,并嘗試?yán)斫?MVW此類框架在流行的Web前端開(kāi)發(fā)中的編程思想,需要的朋友可以參考下2014-12-12
angular2路由之routerLinkActive指令【推薦】
這篇文章主要介紹了angular2路由之routerLinkActive指令的相關(guān)資料,需要的朋友可以參考下2018-05-05
AngularJS操作鍵值對(duì)象類似java的hashmap(填坑小結(jié))
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何創(chuàng)造（使用）這樣一個(gè)對(duì)象呢？今天小編通過(guò)本文給大家分享下，感興趣的朋友一起學(xué)習(xí)吧2016-11-11
Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫(huà)
這篇文章主要介紹了Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫(huà),需要的朋友可以參考下2017-05-05