时间戳

首页 > 解决方案 > Angular 8 路由

angular - Angular 8 路由

问题描述

我正在为我的项目使用 metronic 模板，因为模板中已经存在大部分所需的东西，但是在登录时，当我更改 API URL 时，它会将每个有效的电子邮件 ID 传递到下一页。因此，我尝试更改代码以便它可以按照要求运行，但事情是在验证电子邮件 ID 之后，它不会带我进入下一页。任何形式的帮助将不胜感激。

该模板遵循这种路由方法：

this.router.navigateByUrl(this.returnUrl);

我试了一下：

this.router.navigate(['dashboard']);

登录组件.ts

    ngOnInit(): void {
    this.initLoginForm();

    // redirect back to the returnUrl before login
    this.route.queryParams.subscribe(params => {
        this.returnUrl = params['returnUrl'] || '/';
    });
   }

   submit() {
       this.auth.login(authData.email, authData.password)
       .subscribe((res) => {
         if(res.code === 200){
            localStorage.setItem('token', res.data.token)
            this.router.navigateByUrl(this.returnUrl); // Main page
         }else{this.authNoticeService.setNotice(this.translate.instant('AUTH.VALIDATION.INVALID_LOGIN'), 'danger');}
       })
     }

所需的输出应在提供有效电子邮件 ID 时将其带到仪表板，并为错误的电子邮件 ID 提供错误。虽然它没有移动到下一页，这是提交按钮和有效电子邮件（实际）上的仪表板。

标签： angular

解决方案

您可以订阅或拍摄快照：

this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';

为了使其在您重定向到登录时起作用，请不要忘记提供参数

// e.g. we are in /list page 
this.router.navigate(['/login'], { queryParams: { returnUrl: '/list' } });

推荐阅读