Angular4 能够检查以前的路线

Question

我正在尝试控制组件流 - 有些组件不能直接访问，即必须来自以前的组件。例如，必须先完成并验证 OrderDetails 组件，然后才能访问付款组件。

无法阻止用户输入 "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);
        });

Answer 1

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

有关详细信息，请查看 angular 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
    }
  }
}

Answer 2

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

@Input('ok') private _ok: string

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

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

 }//ctor

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

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

按顺序-details.html这样做。

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

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

this._ok==undefined

Angular4 能够检查以前的路线

Angular4 Ability to check for previous route

angular

redirect

angular2-routing

angular4-router