为什么我不能在为我的 Angular 服务中的 CRUD 删除操作的 then() 定义的函数中使用 Router 对象？

Question

我正在做一个 Angular 项目，我有以下 problem\doubt 试图使用 路由器 class 导航到来自服务内部的特定页面 class。我会尽量详细解释我的问题。

基本上我有这个服务class:

@Injectable({
  providedIn: 'root'
})
export class PatientService {

 

  constructor(
              private firestore: AngularFirestore,
              private router: Router
             ) { }

    ........................................................................
    ........................................................................
    ........................................................................

  deletePatient(patientId) {
    console.log("deletePatient() START. patientId: " + patientId);
    this.firestore
        .collection("patients")
        .doc(patientId)
        .delete()
        .then(async function(docRef) {
          console.log("Patient successfully deleted!");
          //this.router.navigate(['/patients-list']);

        })
        .catch(function(error) {
          console.error("Error deleting document with ID: ", patientId);
          console.log("ERROR: ", error);

          // TODO: NAVIGATE ON THE USER DETAILS PASSING A PARAMETHER IN ORDER TO PRINT AN ERROR MESSAGE
        });

        this.router.navigate(['/patients-list']);
    
  }
}

如您所见，我将 private router: Router 注入到构造函数中，然后将其用于 deletePatient() 方法.

所以它工作正常，它将我重定向到 patients-list 路由指定的页面，但这不是正确的行为，因为我想重定向到这个页面当且仅当患者在我的 Firestore 数据库中被正确删除时。所以从理论上讲，这个导航应该发生在为 then() 定义的函数内（之后它会在控制台中打印消息“Patient successfully deleted！”）。

问题在于这样做：

  deletePatient(patientId) {
    console.log("deletePatient() START. patientId: " + patientId);
    this.firestore
        .collection("patients")
        .doc(patientId)
        .delete()
        .then(async function(docRef) {
          console.log("Patient successfully deleted!");
          this.router.navigate(['/patients-list']);

        })
        .catch(function(error) {
          console.error("Error deleting document with ID: ", patientId);
          console.log("ERROR: ", error);

          // TODO: NAVIGATE ON THE USER DETAILS PASSING A PARAMETHER IN ORDER TO PRINT AN ERROR MESSAGE
        });

        //this.router.navigate(['/patients-list']);
    
  }

它没有重定向我，我在 Chrome 控制台中收到以下错误消息：

ERROR:  TypeError: Cannot read property 'router' of undefined
    at patient.service.ts:104
    at Generator.next (<anonymous>)
    at tslib.es6.js:74
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (tslib.es6.js:70)
    at patient.service.ts:102
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27504)
    at ZoneDelegate.invoke (zone-evergreen.js:363)
    at Zone.run (zone-evergreen.js:123)

为什么在为 then() 案例定义的函数内部，rotuter 对象不可用。查看 私有路由器：路由器 注入我的服务构造函数，在这种情况下 IDE 对我说：

Property 'router' is declared but its value is never read.ts(6138)

因此似乎无法从该函数内部访问 this.router 属性。

为什么？我错过了什么？我怎样才能解决这个问题以获得正确的行为？（我想导航到我的 /patients-list 路径，以防患者删除操作正确（then()），或者导航到错误页面，以防删除患者时出现问题（捕获())

Answer 1

当您使用内联函数时，this 指的是函数调用上下文而不是您的 class 实例。

替换为：

.then(async function(docRef) {
          console.log("Patient successfully deleted!");
          this.router.navigate(['/patients-list']);

 })
.catch(function(error) {

带箭头函数：

.then((docRef) => {
          console.log("Patient successfully deleted!");
          this.router.navigate(['/patients-list']);

})
.catch((error) => {

为什么我不能在为我的 Angular 服务中的 CRUD 删除操作的 then() 定义的函数中使用 Router 对象？

Why I can't use the Router object inside a function definied for the then() of a CRUD delete operation into my Angular service?

angular

typescript

google-cloud-firestore

promise

angular-promise