Angular : 在路由中传递可选数据

Question

我正在使用 angular 5 ，我有一个很长的路由文件 :

const homeRoutes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
      {
        path: 'registration',
        component: RegistrationComponent,
        children: [
          {
            path: 'synthese',
            component: SyntheseComponent
          },
          {
            path: 'queue',
            component: QueueComponent,
            children: [
              {
                path: 'queue-modal',
                component: QueueModalComponent
              },
              {
                path: 'confirm',
                component: ConfirmComponent
              }
            ]
          }
        ]
      },
      {
...

我想在“注册”路径中传递数据。

有人告诉我，我需要这样写：path: 'registration/:mydata'、

然后订阅 ActivatedRoute

的数据

我不总是传递数据的问题，只是在某些情况下。

我怎样才能做到影响最小？？

Answer 1

您可以使用查询字符串参数（又名 queryParams）代替路由参数。您不需要在路由中定义查询参数。

这里是一个相对 href 的例子：

registration/?mydata=123

这就是您可以为 routerLink 定义 queryParams 的方式：

<a [routerLink]="['registration']" [queryParams]="{ mydata: 123 }">Go to Registration</a>

这是您读取该参数值的方式：

myValue: any;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.myValue = params['mydata'];
  });
}

Angular : 在路由中传递可选数据

Angular : pass optional data within route

javascript

typescript

angular-routing

angular

angular5