时间戳

首页 > 解决方案 > 如何以角度构造密码重置密码页面的URL

angular - 如何以角度构造密码重置密码页面的URL

问题描述

我已经为用户创建了一个页面，如果他们忘记了密码，他们可以重置密码。用户将收到一封电子邮件，其中包含重置密码页面的链接以及重置令牌。

密码页面的 URL 应如下所示：

http://localhost:4200/#/resetpassword?code=CfDJ8LBxIxG2Gf5IjZZG9p+g7oDJxTqYPL7OnGSOIblOksnbNniISOo/jKuZ8RkPriLpsCle5VNwVII5O+r9KPmos1WcwmKCB5mMbYeO/tVKxUiqymsEDFjvWEt0X+KfIQlPbe8fvTMtAaB07IG01vwT2UWn+CjEAYwcZgV6eKhPEP21U9lxLxeG8bE6SXMwninNvWI1lf6jm3Ia1MIDikqL9EC033AMIGlnjvEonbxV+Jb

这是我在路由器模块中的路由和重置密码页面 ngOnInit() 代码：

const routes: Routes = [
  {path: 'resetpassword?code=/:code', component: ResetpasswordComponent}
];

  ngOnInit() {
    debugger;
    const param = this.route.snapshot.paramMap.get('code');
    if(param) {
      this.Code = param;
    }
  }

我想知道：

  1. 如何在我的路由定义中设置此路由？
  2. 如何在重置密码页面的 ngOnInit 中的 code= 之后读取 code 的值？

谁能指导我如何建立这样的路线并读取参数值？

标签： angularangular-router

解决方案

路径应该是：

{path: 'resetpassword', component: ResetpasswordComponent}

导航：

<a
    routerLink="/resetpassword"
    [queryParams]="{code: 'CfDJ8LBxIxG2Gf5IjZZG9p+g7oDJxTqYPL7OnGSOIblOksnbNniISOo/jKuZ8RkPriLpsCle5VNwVII5O+r9KPmos1WcwmKCB5mMbYeO/tVKxUiqymsEDFjvWEt0X+KfIQlPbe8fvTMtAaB07IG01vwT2UWn+CjEAYwcZgV6eKhPEP21U9lxLxeG8bE6SXMwninNvWI1lf6jm3Ia1MIDikqL9EC033AMIGlnjvEonbxV+Jb'}"
  >
  </a>

在 resetPassword 组件中：

constructor(private activeRoute: ActivatedRoute) {
    activeRoute.queryParams
      .subscribe((params) => 
        {
          console.log(params)
    });
  }

检查演示。

推荐阅读