代码之家 › 专栏 › 技术社区 › Ram

Angular4检查先前路线的能力

angular4-router angular2-routing redirect angular

Ram · 技术社区 · 6 年前

我试图控制组件的流量-一些组件无法直接访问,即必须来自以前的组件。 e、 g 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);
        });

2 回复 | 直到 6 年前

SplitterAlex 6 年前

您可以使用CanActivate Routeguard来处理到PaymentDetailComponent的有效路由。组件可以通过服务进行通信,并且此服务保持的状态必须为true才能成功路由到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
    }
  }
}

ShanieMoonlight 6 年前

这是另一个选择。在PaymentComponent中,创建一个输入字段,并注入路由器

@Input('ok') private _ok: string

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

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

 }//ctor

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

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

订单详细信息。html可以做到这一点。

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

如果不是通过OrderDetailsComponent访问PaymentComponent,则该字段

this._ok==undefined

推荐文章

Maddison · 如果用户选择18岁以下,则需要表单重定向用户

2 年前

subash web · Iam在django中重定向模板时传递值

2 年前

Joesph Stah Lynn · 反应窗口的版本。地方替换()?

2 年前

July333 · 从localhost的第二个窗口登录时,LocalStorage中的数据会被覆盖

6 年前

John Rogerson · 使用模式名+RedirectVew从Django中的另一个应用程序调用URL名

6 年前

P S · 在laravel 5.5中输入不起作用时重定向回

6 年前

kebie · Django:如果url是由用户手动写入的,则重定向

6 年前

Ashy Ashcsi · Reactjs从操作重定向

6 年前

Tonye Boro · 用户注销后未重新搜索回上次访问的页面

6 年前

Pavel Nedev · 表单提交时的PHP重定向无效

6 年前