我无法通过路线参数

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);

在您的查看资料页中：

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

}

这是最好的解决方案