如何重定向到angular2中不同组件的后退按钮点击页面？

Question

我有 3 个页面来实现这个场景。

目前，

如果我转到第一页，然后单击导航到第二页。然后，在第二页上，我单击后退按钮。它工作正常（即导航到第一页）。
现在，我从第一页转到第二页，然后单击导航到第三页。然后，在第 3 页，我单击后退按钮，它按预期重定向到第 2 页。

现在如果我点击第二页的后退按钮，它会再次转到第三页。我希望将其重定向到第一页。

在这里，实际上根据代码，它工作正常但我的要求是

我有 2 个页面 company 和 companyApp，其中两个页面具有相同的指南和 pin 页面。所以，如果我曾经去过公司的指南页面，我希望指南页面重定向到公司页面页面即使指南页面已经并且来自图像页面。
如果我是从公司应用程序页面引导页面，那么它必须重定向到公司应用程序页面，即使它再次被定向到图像页面和所有页面。

所以，谁能帮我解决这个问题：

TS:

// 1st Page:
goToGuide1(company){
  this.router.navigate(['/guide',company.user._id]);
}

// 2nd page:
import {Location} from '@angular/common';
constructor(private _location: Location) {}
goToCompany1() {
  this._location.back();
}

goImg(guide) {
  this.router.navigate(['/guideimg', guide._id]);
}

// 3rd page
goToGuide1() {
  this.router.navigate(['/guide',this.user_id])
}

这里是第 2 页：如果我转到图片页面并单击后退按钮，它会转到指南页面但不会转到第一页。

Answer 1

该行为的原因：发生这种情况是因为第 3 页存储在位置属性中。

Angular API documentation 表示，

"Note: it's better to use Router service to trigger route changes. Use Location only if you need to interact with or create normalized URLs outside of routing."

您的问题可能的解决方案是，

编写一个服务，将整个用户导航历史保存到一个数据结构中，并在我们需要时检索它。
通过查询参数附加重定向状态，以便使用条件检查当前页面上的状态。

如果我在整个应用程序中多次出现相同的行为，我可能会选择选项 1。但这里可以选择第二个选项。

从任何页面重定向时，将页面详细信息添加到 queryParams 并重定向。

例如 - 如果来自公司页面，

[routerLink]="['/guide', <anyId>]" [queryParams]="{from: 'company'}"

 or

goToGuide1(company){
  this.router.navigate(['/guide',company.user._id], { queryParams: { 'from': 'company' } });
}

因此，当您重定向到后台时，您可以检查条件并重定向回来。

// Import
import { ActivatedRoute } from '@angular/router';

// Inject
constructor(
  private route: ActivatedRoute
) {
  // store the previous state
  this.route.queryParams.subscribe(params => {
    this.redirectedFrom = params['from'];
  }
}

// check the condition while redirect
goToBackState() { // can go as goToCompany
  if (this.redirectedFrom === company) {
    // redirect to company
  } else {
    // otherwise redirect to companyApp
    // Please note that you can check for the companyApp as well.
  }
}

这完全取决于您如何处理条件逻辑和整体逻辑。如果你识别出这些并正确地做，然后它应该按预期工作。

Answer 2

我们利用 localStorage 的优点并存储当前组件并相应地重定向，

既然你有，

{ path: 'company', component: CompanyComponent, canActivate:[AuthGuard] },
{ path: 'companyapp', component: CompanyAppComponent, canActivate:[AuthGuard] }

在公司组件中：

goToGuide(company){
  this.localStorage.store('oldroute', 'company')
  this.router.navigate(['/guide',company.user._id]);
}

在 companyApp 组件中：

goToGuide(company){
  this.localStorage.store('oldroute', 'companyapp')
  this.router.navigate(['/guide',company.user._id]);
}

在指南组件中，

goToCompany() {
  if(this.localStorage.retrieve('oldroute') && (this.localStorage.retrieve('oldroute') == 'companyApp'))
  {
    this.router.navigate(['/companyApp']);
  }else{
    this.router.navigate(['/company']);
  }
}

如何重定向到angular2中不同组件的后退按钮点击页面？

How to redirect to the pages on back button click of different components in angular2?

javascript

angular

angular-router