Question

我有3个页面来实现这种情况。

目前，

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

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

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

我有2页公司和companyApp，其中两个页面都有相同的指南和图钉页面..所以，我希望指南页面重定向到公司页面，如果我去公司页面指导页面，即使指南页面已经来自图像页面。
如果我去compnay应用页面引导页面，那么它必须重定向到公司应用页面，即使它再次被定向到图像页面和所有页面。

所以，任何人都可以帮我解决这个问题：

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页：如果我转到图像页面并单击后退按钮，它将进入指南页面，但不会转到第1页。

Answer 1

行为原因：由于第3页存储在location属性中，因此发生了这种情况。

Angular API documentation表示，

“注意：最好使用路由器服务来触发路由更改。仅当您需要与路由之外的交互或创建规范化URL时才使用位置。”

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

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

如果我在整个应用程序中多次使用相同的行为，我可能会使用选项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的好处并存储当前的Component并相应地重定向，

既然你有，

{ 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中的不同组件？

2 个答案: