如何在angular中构建密码重设密码页面URL

Question

我制作了一个页面，供用户在忘记密码时重设密码。用户将收到一封电子邮件，其中包含 link 重置密码页面以及重置令牌。

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;
    }
  }

我想知道：

如何在我的路线定义中设置这条路线？
如何在重置密码页面的ngOnInit中读取code=后的code值？

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

Answer 1

路径应该是：

{path: 'resetpassword', component: ResetpasswordComponent}

导航：

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

在重置密码组件中：

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

检查DEMO。

如何在angular中构建密码重设密码页面URL

How to construct the URL of password reset password page in angular

angular

angular-router