Question

在Ionic 4项目中，我正在使用路由器发送参数，但无法在另一页上获取参数。

这是我的 tabs.router.module.ts ：

{
    path: 'tab2',
    children: [
      {
        path: '',
        loadChildren: '../tab2/tab2.module#Tab2PageModule'
      },
      {
        path: 'eventdetails',
        loadChildren: '../eventdetails/eventdetails.module#EventdetailsPageModule'
      },
      {
        path: 'acceptchallenge/:chid',
        loadChildren: '../acceptchallenge/acceptchallenge.module#AcceptchallengePageModule'
      }
    ]
},

这是我的 tab2.page.ts ：

acceptchallenge(challengesobj)
{
 console.log('Accept Challenge:', challengesobj);
 this.router.navigate(['/tabs/tab2/acceptchallenge/' + challengesobj.id,challengesobj]);
}

在这时，我将challengesobj发送到另一页，但无法获取。

这是我的 accept.page.ts ：

export class AcceptchallengePage implements OnInit {
  chaobj: any;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
  }
  async ionViewWillEnter(){
    let me=this;  
    this.route.params.subscribe(params => {
      me.chaobj = params['challengesobj']; 
    });
    console.log('challengesobj: ', me.chaobj);
  }
}

在这个ts文件中，当我控制该值时，它显示为未定义。

非常感谢您的帮助。

Answer 1

尝试一下：

发送对象：

acceptchallenge(challengesobj)
{

let navigationExtras: NavigationExtras = {
  queryParams: {
    special: JSON.stringify(challengesobj)
  }
};

 this.router.navigate(['/tabs/tab2/acceptchallenge/' + challengesobj.id,navigationExtras]);
}

获取对象：

 export class AcceptchallengePage implements OnInit {
      chaobj: any;
      constructor(private route: ActivatedRoute) { 

        this.route.queryParams.subscribe(params => {
           if (params && params.special) {
               this.chaobj = JSON.parse(params.special);
               console.log('challengesobj: ', this.chaobj);
           }
        });
}

  ngOnInit() {
  }

}

另一种方式：

发送对象：

acceptchallenge(challengesobj)
{

let navigationExtras: NavigationExtras = {
  state: {
    challengesobj: challengesobj
  }
};

 this.router.navigate(['/tabs/tab2/acceptchallenge/' + challengesobj.id,navigationExtras]);
}

获取对象：

 export class AcceptchallengePage implements OnInit {
      chaobj: any;
      constructor(private route: ActivatedRoute) { 

         this.route.queryParams.subscribe(params => {
            if (this.router.getCurrentNavigation().extras.state) {
              this.chaobj = this.router.getCurrentNavigation().extras.state.challengesobj;
          }
       });
}

  ngOnInit() {
  }

}

无法在Ionic 4中的路由器中发送参数

1 个答案: