我无法通过路线参数

时间:2019-07-04 02:12:51

标签: angular typescript angular-routing ionic4

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

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

The console log on the view-profile page

3 个答案:

答案 0 :(得分:2)

为此,您应该使用navigate函数,其中issue when passing queryParamsnavigateByUrl

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

在您的查看资料页中:

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

答案 1 :(得分:0)

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

}

答案 2 :(得分:0)

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

}

这是最好的解决方案