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