為什么我不能在 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) => {