为什么我不能在 function 中使用路由器 object 为我的 Angular 服务中的 then() CRUD 删除操作定义？

Question

我正在研究 Angular 项目，但我遇到以下问题\怀疑尝试使用路由器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']);
    
  }
}

如您所见，我将私有路由器：路由器注入构造函数，然后将其用于deletePatient()方法。

因此它工作正常，它将我重定向到患者列表路由指定的页面，但这不是正确的行为，因为当且仅当患者在我的 Firestore 数据库中被正确删除时，我才想重定向到此页面。 所以理论上这个导航应该发生在为then()定义的 function 中（然后它在控制台中打印消息“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()案例定义的 function 内部， rotuter object 不可用。 查看私有路由器：在这种情况下，我的服务构造函数的路由器注入 IDE 对我说：

声明了属性“路由器”，但它的值永远不会被读取。ts(6138)

所以似乎从这个 function 的内部， this.router属性是不可访问的。

为什么？ 我错过了什么？ 如何解决此问题以获得正确的行为？ （如果有正确的患者删除操作（then()），我想导航到我的/patients-list路线，或者在删除患者时出现问题（catch()）导航到错误页面

Answer 1

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

替换这个：

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

 })
.catch(function(error) {

用箭头 function：

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

})
.catch((error) => {