我有一個像這樣的簡單路由：
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'scenario',
loadChildren: () => import('./pages/scenarios/scenario/scenario.module').then( m => m.ScenarioPageModule)
}
]
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
如您所見，我有一個“場景”視圖，因此在我的 app.component.ts 中，我有這個來導航該路線：
this.navController.navigateRoot('scenario');
因此，當前路徑是： http://localhost:8100/scenario
現在，我想在我的 app.component.ts 中有一個條件，如果該路由包含一個特定的引數，比如http://localhost:8100/scenario/?id=C3E1EE21-A62C-452F-BE0D-AC3EF5449F23
做一些特別的事情。我應該怎么做路由來接受引數id，然后在app.component.ts中讀取引數是否來了，做一個簡單的if like：
if(url.contains(parameter))
{
}
我怎樣才能做到這一點？問候
更新
我嘗試在 app.component.ts 上使用
import { ActivatedRoute, NavigationEnd, Router, UrlSegment } from '@angular/router';
export class AppComponent implements OnInit {
constructor(
private activatedRoute: ActivatedRoute,
)
ngOnInit(){
this.activatedRoute.queryParams.subscribe(params => {
var name = params['name'];
console.log(name)
});
}
但是在 console.log 上未定義，我是否需要更改路由模塊上的某些內容才能接受引數？因為當我查找時引數被洗掉：http://localhost:8100/scenario/?id=C3E1EE21-A62C-452F-BE0D-AC3EF5449F23
所以我嘗試在路由模塊中添加一個新路徑，例如：
{
path: 'scenario/:id',
loadChildren: () => import('./pages/scenarios/scenario/scenario.module').then( m => m.ScenarioPageModule)
},
但拋出相同的結果
uj5u.com熱心網友回復：
指定您的查詢引數名稱（在這種情況下為“id”，而不是“名稱”）：
ngOnInit() {
this.activatedRoute.queryParams.subscribe(params => {
var name = params['id'];
console.log(name)
});
}
并且不要使用 /:id - 它設計用于復雜的路由（如 http://localhost:8100/scenario/id）：
{
path: "scenario",
loadChildren: () =>
import('./pages/scenarios/scenario/scenario.module').then(m => m.ScenarioPageModule),
},
uj5u.com熱心網友回復：
要從組件中獲取查詢引數，您可以使用ActivatedRoute服務：
從您的組件：
construction(private route: ActivatedRoute,
(...)
)
// then you can subscribe to the query string params from your functions with
this.route.queryParams.subscribe(params => {
this.name = params['name']; //
});
您可以在Angular 的網站上找到有關路由器服務的更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/412079.html
標籤：
上一篇：回傳相同物件的JQuery函式