Question

所以问题在标题中。我需要通过单击1. User taps on "Pay Now" in the app. 2. An in-app WebView will be opened up and user will be required to make the payment in a third-party payment page. 3. After payment, user will be redirected to another link.按钮和用户在浏览器搜索栏中手动输入URL来进行不同的导航。

UPD ：所以我有固定菜单页面。此菜单如下所示：

[routerLink]

每个步骤都有自己的内容，这些内容在<ul> <li [routerLink]="[/step1]">Step1</li> <li [routerLink]="[/step2]">Step2</li> <li [routerLink]="[/step3]">Step3</li> </ul>中的菜单下呈现。步骤的顺序很重要。因此，如果用户在像<router-outlet>这样的浏览器中手动输入了网址，我想将其从“ / step2”重定向到“ / step1”。并且如果他从菜单进入www.my-app.com/step2，请不要重定向。

Answer 1

使用Angular的ActivatedRoute类，您可以实现所需的功能。

导入并注入提供者：

import { ActivatedRoute } from '@angular/router'

// ...

constructor(private activatedRoute: ActivatedRoute) { ... }

然后订阅并对其进行测试：

this.activatedRoute.url.subscribe(url => console.log(url))

More on Angular's Router events

Answer 2

如果没有变量来检查用户的来源，我认为您想要的东西是不可能的。

您可以在单击按钮时传递参数，然后在第二页上检查该参数值。看起来可能像这样：

<ul>
  <li [routerLink]="[/step1]">Step1</li>
  <li [routerLink]="[/step2]" [queryParams]="{completeStepOne: true}">Step2</li>
  <li [routerLink]="[/step3]">Step3</li>
</ul>

然后在第2步组件的init方法中获取该参数并对其进行检查：

const params = this.router.parseUrl(this.router.url);
this.completeStepOne = params.queryParams.completeStepOne;

if (!this.completeStepOne) {
    this.router.navigate(['step1']; // If it is not true, return user to step one
}

或者，如果您的应用程序设计允许并在一个组件中处理用户旅程，则可以在同一页面中包含所有步骤。角材料具有良好的步进器设计，其配置使您可以停止用户跳到第二步，而无需先执行第一步。您可以查看文档here。

如何在Angular 6中以编程方式手动更改URL更改？

2 个答案: