我无法传递路由参数

Question

我使用以下代码从调用页面传递路由参数：

   showProfile(id: string) {
    const navigationParam: NavigationExtras = {
      queryParams: {
        userId: id
      }
    };
    console.log('navParm', navigationParam);
    this.router.navigateByUrl('view-profile', navigationParam);
   }

console.log 显示带有数据的 navigationParam。但是，查看配置文件页面上的控制台日志不是

  constructor(private route: ActivatedRoute,
              private router: Router) {
    this.route.queryParams.subscribe(params => {
      console.log('params', params);
    });
  }

Answer 1

你应该为此使用 navigate 函数，有一个 issue when passing queryParams 和 navigateByUrl:

 this.router.navigate(['view-profile'], navigationParam);

在您的 view-profile 页面中：

constructor( private route: ActivatedRoute,
             private router: Router ) {
    this.route.queryParams.subscribe(params => {
       console.log(params['userId']);
    });
  }
}

Answer 2

**parent.ts**
import { Router } from '@angular/router';
constructor( public router: Router, )    

this.router.navigate(['/view-profile', { id: your params variable}]);

**view-profile.ts**

import { ActivatedRoute,  } from '@angular/router';
constructor(
   private route: ActivatedRoute,
 ) {

let data = this.route.snapshot.paramMap.get('id');
console.log(" data ", data);

}

Answer 3

parent.ts

 openDetailsWithState() {
let navigationExtras: NavigationExtras = {
  state: {   \create state like object
    user: this.user \this.user is your  array this method using pass array ,u can avoid pass data inside URL bar
  }
};
this.router.navigate(['details'], navigationExtras);

}

Child.ts

data: any;


constructor(private route: ActivatedRoute, private router: Router) {
this.route.queryParams.subscribe(params => {
  if (this.router.getCurrentNavigation().extras.state) { \Get value from state
    this.data = this.router.getCurrentNavigation().extras.state.user;
  }
});

}

这是最佳解决方案

我无法传递路由参数

I'm unable to pass route params

typescript

angular-routing

angular

ionic4