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