将参数添加到路由并在条件中使用

Question

我有一个像这样的简单路由：

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)
  },

但抛出相同的结果

Answer 1

要从组件中获取查询参数，您可以使用 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's website

中找到有关路由器服务的更多信息

Answer 2

指定您的查询参数名称（在本例中为'id'，而不是'name'）：

    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),
    },

Answer 3

由于某些原因，我无法使用激活的路由或路由访问路由，因此我使用了替代方法。

创建了一个纯js获取参数的方法

 getParameter() {
     if (document.URL.indexOf("?") > 0) {
         let splitURL = document.URL.split("?");
         let splitParams = splitURL[1].split("&");
         let i: any;
         for (i in splitParams){
             let singleURLParam = splitParams[i].split('=');
             if (singleURLParam[0] == "id"){
                 this.id = singleURLParam[1];
             }
         }
     }
}

现在我可以使用 this.id

访问它

将参数添加到路由并在条件中使用

Add parameter to a route and use in a conditional

angular-ui-router

ionic-framework

angular

ionic4