詳解Angular16如何獲取路由參數(shù)
引言
Anguar 16 引入一個有趣的功能，可以將路由器數(shù)據(jù)直接通過 @Input 來綁定，例如：QueryString，路由參數(shù)，data 靜態(tài)數(shù)據(jù)。
舊寫法
在 Angular 16 之前，需要通過 ActivatedRoute 來獲取這些數(shù)據(jù)。假設有這么一個路由配置：
{
path: ':type',
component: TestComponent,
data: { role: 'admin' }
}并通過以下訪問路由時：
/weixin?uid=1&allow=false
我們可以透過注入 ActivatedRoute 并分別從 data、params、queryParams 獲取到所需要的數(shù)據(jù)。
倘若，你想監(jiān)聽 params 數(shù)據(jù)的變化，還需要單獨為訂閱處理；
除此之外，除 data 以外，其他數(shù)據(jù)類型都是自動轉(zhuǎn)成 string，反正到這里我已經(jīng)很煩人了。
新方式
從 Angular 16 開始這些參數(shù)都可以自動綁定到 @Input 輸入?yún)?shù)當中。可以通過 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 以上新的改進，可以極大的簡化編寫 get、set。
當然，當路由發(fā)生變更時 @Input 也會自動更新，你可以通過 ngOnChanges 來知曉，也可以利用 get、set 寫法。
以上就是詳解Angular16如何獲取路由參數(shù)的詳細內(nèi)容，更多關于Angular16獲取路由參數(shù)的資料請關注腳本之家其它相關文章！
相關文章
詳解AngularJs中$sce與$sceDelegate上下文轉(zhuǎn)義服務
這篇文章給大家詳細介紹了AngularJs提供的嚴格上下文轉(zhuǎn)義服務$sce與$sceDelegate，文中介紹的很詳細，有需要的朋友們可以參考借鑒。2016-09-09
ng-container 是 Angular 2+ 中可用的一個元素,可以作為結(jié)構指令的宿主,在本文中,您將探討可以使用 ng-container 解決的場景,文中有相關的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-02-02
本文主要介紹AngularJS 雙向綁定，這里整理了詳細的知識資料并講解，而且附有代碼示例，有興趣的小伙伴可以參考下2016-08-08
Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝
本文主要介紹 Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝，這里詳細介紹了安裝步驟和注意事項，有在Ubuntu 環(huán)境下開發(fā)的朋友可以參考下2016-09-09
最近在angular的項目，但是我用直接引用百度地圖的方法引進js,寫html,js代碼，發(fā)現(xiàn)報錯，接下來通過本文給大家介紹angular和百度地圖的結(jié)合,需要的朋友可以參考下2016-10-10
這篇文章主要給大家介紹了關于Angular項目如何升級至Angular6的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-09-09
這篇文章主要介紹了angular中使用路由和$location切換視圖,需要的朋友可以參考下2015-01-01
angularjs指令中的compile與link函數(shù)詳解
這篇文章主要介紹了angularjs指令中的compile與link函數(shù)詳解,本文同時訴大家complie,pre-link,post-link的用法與區(qū)別等內(nèi)容,需要的朋友可以參考下2014-12-12
本篇文章主要介紹了Angular2自定義分頁組件的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
本文主要給大家匯總了一下angular.element的方法，十分的詳細，這里推薦給大家 參考下。2015-01-01