Angular 如何返回到正确的页面

我正在使用Angular开发Web应用程序的前端。我创建了一个可以从其他不同页面访问的页面。从这个新页面，我可以访问其他页面。我在这个页面上添加了一个“取消”按钮：这个按钮应该会让我回到原来的页面。例如，提供的解决方案不起作用，因为我可以在返回之前从我的页面访问其他页面。因此，为了解决这个问题，我创建了自己的方法（参见下面的代码）：这是基于我以前访问过的页面的历史记录。但是，这有时不起作用，因为历史记录有时会被删除。有什么解决办法吗？谢谢

  cancelForm(): void {
    console.log(this.routingState.getHistory());
    var count = 1;
    var previousUrl = this.routingState.getHistory()[this.routingState.getHistory().length - count];
    while(previousUrl && (previousUrl.includes('contract-edit/add') || previousUrl.includes('project-add') || previousUrl.includes('employee-edit'))) {
      previousUrl = this.routingState.getHistory()[this.routingState.getHistory().length - count];
      count ++;
    }
    console.log(previousUrl);
    this.router.navigate([previousUrl]);
  }

编辑：

---

为了更好地解释这种情况，我举了这个例子。我有一个页面，其中包含给定公司某个项目的详细信息。可以从包含所有项目列表的页面和公司特定客户的项目列表访问此页面。所以，当我点击“取消”时，我必须返回到正确的页面。但是，从包含项目详细信息的页面，我还可以访问包含与此项目相关的任务详细信息的页面。因此，我不能像中所建议的那样，仅使用

这个。_location.back（）

作为我的“取消”按钮，因为如果我访问了任务的详细信息，它可以将我带到页面。

使用模式窗口来完成此要求

更新：根据您提供的其他信息：

创建名为projectDetailsComponent的组件，该组件显示与项目相关的详细信息。这也将显示与项目相关的任务。 使用与下面的代码类似的代码，并将与项目细节和任务相关的代码放在asstrix所在的位置

2.在两个地方实施此新组件： （i.）包含所有项目列表的页面，以及 （ii.）公司某客户的项目清单

现在您将有两个模态窗口的实例，当您单击中的按钮时，该窗口将打开，当您关闭它们时，您将返回到以前的位置

ProjectDetails组件的外观

import { Component, Input } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      ****BUILD COMPONENT HERE to display project details and tasks***
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
  selector: 'project-Details-component ',
  templateUrl: './modal-component.html'
})
export class projectDetailscomponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(projectDetailscomponent);
    modalRef.componentInstance.name = 'World';
  }
}

从'@angular/core'导入{Component，Input}；
从'@ng bootstrap/ng bootstrap'导入{NgbActiveModal，NgbModal}；
@组成部分({
选择器：“ngbd模式内容”，
模板：`
你好！
&时代；
****在此处生成组件以显示项目详细信息和任务***
接近
`
})
出口类NgbdModalContent{
@输入（）名称；
构造函数（public-activeModal:NgbActiveModal）{}
}
@组成部分({
选择器：“项目详细信息组件”，
templateUrl:“./modal component.html”
})
导出类项目详细信息组件{
构造函数（私有modalService:NgbModal）{}
开（）{
const modalRef=this.modalService.open（projectDetailscomponent）；
modalRef.componentInstance.name='World'；
}
}

.HTML文件

<button class="btn btn-lg btn-outline-primary" (click)="open()">Display Project Info</button>

显示项目信息

虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能会无效。谢谢您的回答！然而，我不明白模态对话框组件如何帮助解决这个问题。。。你能再解释一下吗？我已经更新了我的答案，加入了更多的信息。希望能有帮助