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 寫法仪搔。
Happy coding!
