错误无法读取属性未定义的导航？

Question

我试图在从服务返回值后导航到另一个组件。但是导航出错。我的代码文件如下：

这是我的 PaymentPageComponent

import { Router } from '@angular/router';
import { PaymentService} from 'src/app/Services/comServices/payment.service'
import { fileURLToPath } from 'url';

export class PaymentPageComponent implements OnInit {
  model = {};
  constructor(public router: Router) {}

  ngOnInit(){
    let config = { 
      "publicKey": "abcd",
      "eventHandler": {
          onSuccess (clientSideVerificationResult) {
            const payload = clientSideVerificationResult;
            const output = Object.assign( {}, this.model, {token: payload.token},{amount:payload.amount});
             PaymentService
              // hit merchant api for initiating verfication
              PaymentService.verifyPayment(output)
              .then((response) => {
                if(response.data.paymentStatus=== "Completed"){
                  alert('Payment Successfull');
                  this.router.navigate(['/Bill']);
                }
              });
  
          },
      },
    };
  }

}

这是我的服务文件

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Router} from '@angular/router';
import axios from 'axios';


@Injectable({
  providedIn: 'root',
})

export class PaymentService {   
    
    constructor() {}
    static verifyPayment(payload: any) {

    let data = {
        'token': payload.token,
        'amount': payload.amount,
    };

    return axios.post(environment.api_url+"setappointment", data)
    }
}

导航出错。

TypeError: 无法读取未定义的属性 'navigate'

Answer 1

试试这个方法PaymentPageComponent

import { Router } from '@angular/router';
import { PaymentService} from 'src/app/Services/comServices/payment.service'
import { fileURLToPath } from 'url';

export class PaymentPageComponent implements OnInit {
    model = {};
  constructor(public router: Router) {}

ngOnInit(){
  let tempRouter = this.router;
  let config = { 
    "publicKey": "abcd",
    "eventHandler": {
        onSuccess (clientSideVerificationResult) {
          const payload = clientSideVerificationResult;
          const output = Object.assign( {}, this.model, {token: payload.token},{amount:payload.amount});
           PaymentService
            // hit merchant api for initiating verfication
            PaymentService.verifyPayment(output)
            .then((response) => {
              if(response.data.paymentStatus=== "Completed"){
                alert('Payment Successfull');
                tempRouter.navigate(['/Bill']);
              }
            });

        },
    },
    };
}
}

Answer 2

尝试将 onSuccess 修改为箭头函数。

"eventHandler": {
    onSuccess: (clientSideVerificationResult) => {
      const payload = clientSideVerificationResult;
      const output = Object.assign( {}, this.model, {token: payload.token},{amount:payload.amount});
       PaymentService
        // hit merchant api for initiating verfication
        PaymentService.verifyPayment(output)
        .then((response) => {
          if(response.data.paymentStatus=== "Completed"){
            alert('Payment Successfull');
            this.router.navigate(['/Bill']);
          }
        });

    },
},

错误无法读取属性未定义的导航？

Error Cannot Read Property Navigate of Undefined?

navigation

static-methods

typescript

angular

错误无法读取 属性 未定义的导航？

Error Cannot Read Property Navigate of Undefined?

navigation

static-methods

typescript

angular

错误无法读取属性未定义的导航？