Question

我试图控制组件的流量 - 某些组件不能直接访问，即必须来自之前的组件。例如，必须先完成并验证OrderDetails组件，然后才能访问Payment组件。

无法阻止用户输入＆＃34; localhost：xxxxx /＃/ PaymentDetails＆＃34;

如何检查用户是否来自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。

有关详细信息，请检查角度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

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

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

如果从OrderDetailsComponent以外的任何方式访问PaymentComponent，那么字段

this._ok==undefined

Angular4能够检查以前的路线

2 个答案: