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

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

这是我的标签.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'
      }
    ]
},

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

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

这是我的选项卡2.page.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'
      }
    ]
},

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

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中，我将

challengesobj

发送到另一个页面，但无法获取它

这是我的接受.page.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'
      }
    ]
},

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

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文件中，当我控制台该值时，它显示为未定义

---

非常感谢您的帮助。

试试看：

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() {
  }

}

发送对象：

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() {
  }

}

获取对象：

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() {
  }

}

另一种方式：

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() {
  }

}

发送对象：

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() {
  }

}

获取对象：

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() {
  }

}

获取对象：

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() {
  }

}

---

params

显示了什么？@SachinGupta。这个challengesobj参数是我正在发送的对象，它显示为未定义。显示为未定义。我是否也必须在routes.path:'acceptchallenge/：chid'中定义，我已经定义了Id，所以我得到的是Id，而不是'challengesobj'