Angular4 能够检查以前的路线答案

【问题标题】：Angular4 Ability to check for previous routeAngular4 能够检查以前的路线
【发布时间】：2018-07-05 15:05:51
【问题描述】：

我正在尝试控制组件的流程 - 某些组件无法直接访问，即必须来自前一个组件。例如，OrderDetails 组件必须先完成并验证，然后才能访问 Payment 组件。

无法阻止用户输入“localhost:xxxxx/#/PaymentDetails”

如何检查用户是否来自 OrderDetails 组件并已完成表单？我在下面的 PaymentDetails 组件中尝试过，但不起作用。

非常感谢任何帮助指导。

this.router.events
.filter(e => e instanceof RoutesRecognized)
.pairwise()
.subscribe((event: any[]) => {
            console.log(event[0].urlAfterRedirects);
            console.log(event[0]);
            alert("PREVIOUS" +event[0].urlAfterRedirects);

 });

 this.router.events
 .filter(event => event instanceof NavigationStart)
 .pairwise()
 .subscribe((value: [NavigationEnd, NavigationEnd]) => {
            let previousUrl = value[0].url;
            let nextUrl = value[1].url;
            console.log(value);
            alert("PR" + previousUrl);
            alert("CR" + nextUrl);
        });

【问题讨论】：

拥有一个无法访问的组件的路由有什么意义？为什么您在付款数周后没有填写订单就看不到付款明细？如果 PaymentDetails 只是某个订购向导的一个步骤，那么您可以使用守卫：angular.io/guide/router#canactivate-requiring-authentication
谢谢 - 这真的很有帮助

标签： angular redirect angular2-routing angular4-router

【解决方案1】：

您可以使用 CanActivate Routeguard 来处理到您的 PaymentDetailComponent 的有效路由。组件可以通过服务进行通信，并且该服务拥有一个状态，该状态必须为真才能成功路由到 PaymentDetailsComponent。

有关更多详细信息，请查看角度documentation

import { Injectable }     from '@angular/core';
import { CanActivate, Router }    from '@angular/router';
import { OrderDetailService } from './path/to/OrderDetailService';


@Injectable()
export class PaymentDetailsGuard implements CanActivate {

  constructor(private ods: OrderDetailService,
              private router: Router) {}

  canActivate() {
    // Check here if OrderDetailService holds valid data, e.g valid form 
    // otherwise navigate the user to your OrderDetailComponent
    if (this.ods.validToProceedToPaymentDetails) {
      return true
    } else {
      this.router.navigate(['/orderDetail'])
      return false
    }
  }
}

【讨论】：

【解决方案2】：

这是另一种选择。在 PaymentComponent 中，创建一个 Input 字段，并注入一个 Router

@Input('ok') private _ok: string

//------------------------------------------------------------//

constructor(private _router: Router) {
     super();

 }//ctor

//------------------------------------------------------------//

ngOnInit() {
  if (!this._ok)
    this._router.navigate(['/home'])
}//ngOnInit

在 order-details.html 中执行此操作。

<app-payment *ngIf="_goToPayment"  [ok]="'ok'"></app-payment>

如果通过 OrderDetailsComponent 以外的任何其他方式访问 PaymentComponent，则该字段

this._ok==undefined

【讨论】：