Angular2 问题检索 URL 参数

Question

我目前正在我的 angular 2 应用程序（.net core 2 后端）中实施确认电子邮件流程。当前的工作流程是：用户注册 -> 向他们发送一封电子邮件以确认他们的帐户 -> 他们单击 link -> 他们被定向到一个 angular 组件，该组件应该读取用户 ID 和生成的令牌.浏览器中的Url是http://localhost:35000/confirm-email?token=CfDJ8OR7TVlXC69LsUgYal539cq4%2FcxvIXYoyaXcvLXQofMfK8d%2Bp6JE02IBATC49meM8bNSq9pgzq%2B7MspZLt7h1hfetLF2iVkXRkQZHFiJluhRpJbZ7kkafpyrbXjs82KFjkzVSOEDGV4sC6x4%2Bd0i0SXejfK%2F%2FpZgKTnOhdvB%2FwbLK5iauwdDXnjV7ZN7LHA0HInpvBPF2OOpdjJ%2FXicRLYLq5ic4Pz7SnXz0iwOTj4HJQIZAX%2FA1DqgvrPR6vuaOwQ%3D%3D&userId=5da26d4c-f737-481c-9142-affd89e8e9d6

将我路由到下面的确认电子邮件组件，但是我无法正确读取我的参数 token 和 userId - 它们始终未定义。我的 angular 组件的简化代码如下：

export class ConfirmEmailComponent implements OnInit {
    emailConfirmed: boolean = false;

    constructor(private userService: UserService,
        private router: Router,
        private activatedRoute: ActivatedRoute) { }

    ngOnInit() {
        this.activatedRoute.params.subscribe((params: Params) => {
          let token = params['token'];
          let userId = params['userId'];

          this.userService.confirmEmail(token, userId).subscribe(
            (data) => {
              this.emailConfirmed = true;
            });
        });
    }
}

Answer 1

您需要订阅 activatedRoute.queryParams，而不是 params，显然，因为您通过查询参数传递数据，而不是预定义的参数（'my-url?key=value' 而不是 'my-url/:someParam'） .就像这样：

this.activatedRoute.queryParams.subscribe((params: Params) => { //etc

Angular2 问题检索 URL 参数

Angular2 issues retrieving URL parameters

query-parameters

typescript

angular