角度数据不通过路由

Question

我通过这样的路由发送数据

    navigateWithState(x) {
        console.log(x);
        this.router.navigateByUrl('/full-layout/add-form/1', { queryParams: {x} });
    }

然后像这样获取它

 constructor(private route:ActivatedRoutet) {

      if(this.options == 1){
      console.log('edit');
      this.route
      .queryParams
      .subscribe(params => {
        console.log(params);
      });
    }
    else{
      console.log('add');

    }
}

但不知道为什么它显示一个空数组

你可以在控制台看到

在控制台值中，x 的数据显示在控制台中，但是当我通过路由器时，它显示为空白。

我也尝试使用这样的 navigationExtras

navigateWithState(x) {
    console.log(x);
    const queryParams: any = {};

    queryParams.myArray = JSON.stringify(x);

    const navigationExtras: NavigationExtras = {
      queryParams
    };
    this.router.navigateByUrl('/full-layout/add-form/1', navigationExtras);

}

在 .ts 中

if(this.options == 1){
  console.log('edit');
  const myArray = this.route.snapshot.queryParamMap.get('myArray');
  console.log(myArray);

}
else{
  console.log('add');

}

它在 myArray 中显示为 null。

Answer 1

当您使用 navigateByUrl 时，您需要将它们添加到 URL 中。如果您使用的是 navigate，那么您可以传递参数。

  navigateWithState(x) {
        console.log(x);
        this.router.navigateByUrl(`/full-layout/add-form/1?x=${JSON.stringify(x)}`);
    }

通过导航，您可以使用它。在这里，您将从参数中获取值。

  navigateWithState(x) {
        console.log(x);
        this.router.navigate(['/full-layout/add-form/1'], { queryParams: {x: JSON.stringify(x)}}); // when you get it parse it to JSON i.e JSON.parse('values');

}

Answer 2

如果您使用navigateByUrl，则必须传递如下参数；

this.router.navigateByUrl(`/full-layout/add-form/1?x=${x}`);