如何在收到成功状态时在 Angular2 中重定向？

Question

我不想使用 location.href，它实际上 loads/refreshes 并重定向到 url。我想要相同的页面加载（不知道这是否是实际术语），即。无需重新加载或刷新浏览器即可打开的页面。

这是在我的 app.module.ts.

中定义的路由

const appRoutes: Routes = [
  { path: 'admin',
    component: AdminComponent,
    children: [
          { path: '', component: LoginComponent},
          { path: 'dashboard', component: DashboardComponent}
    ]
  }
];

这里是我的login.component.ts.

中定义的提交函数

submitPost()
{        
    this._adminLogin.postAdminLogin(this.adminLoginmodel).subscribe(
        data => {
              this.responseStatus = data;
              if(this.responseStatus.status.length > 0 && this.responseStatus.status == 1)
              {
                alert('Login Success');
              }
              else
              {
                alert('Login Error');
              }
            },
        err => {
              console.log(err)
            },
        () => {}
    ); 
    this.status = true;       
}

我该怎么做？

编辑：

感谢大家在回答部分提出的建议。但是，router.navigate('admin/dashboard') 在控制台中向我抛出一个错误：

ReferenceError: router is not defined
Stack trace:
LoginComponent.prototype.submitPost/<@webpack-internal:///./src/app/admin/login/login.component.ts:32:17
SafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:245:13
SafeSubscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:192:17

但是我已经在我的 login.component 中添加了导入的 Router。这是我在 login.component.ts 中的总代码：-

import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { fadeInAnimation } from '../../_animations/index';
import { Admin } from '../../_models/admin.model';
import { AdminLoginService } from '../../_admin_service/admin.login';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  animations: [fadeInAnimation],
  host: { '[@fadeInAnimation]': '' },
  providers: [AdminLoginService]
})

export class LoginComponent implements OnInit {
    loading = false;
    returnUrl: string;
    responseStatus:Object= [];
    status:boolean ;
    //@Input() admin:Admin;

  adminLoginmodel = new Admin('', '', '', 'Emailsss','Passwordsss');    

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private _adminLogin: AdminLoginService
    ){}

    submitPost()
  {        
      this._adminLogin.postAdminLogin(this.adminLoginmodel).subscribe(
          data => {
                this.responseStatus = data;
                if(this.responseStatus.status == 1)
                {
                  this.router.navigate('admin/dashboard')
                }
                else
                {
                  alert('Login Error');
                }
              },
          err => {
                console.log(err)
              },
          () => {}
      ); 
      this.status = true;       
  }

    ngOnInit() {
    }
}

为什么我会收到错误消息？

Answer 1

您可以在您的组件中注入 Router 并使用它将您的用户重定向到您想要的位置，而无需像 location.href.[=14= 那样完全重新加载您的应用程序]

例如，如果您有一个 "success" 路由来在成功时重定向您的使用，否则有一个 "fail" 路由，它看起来像这样：

constructor (private router: Router) {}

submitPost () {
    this._adminLogin.postAdminLogin(this.adminLoginmodel).subscribe(
       data => {
            // Do your stuff in case of success
            this.router.navigate(['success']);
       },
       err => {
            // Do your stuff in case of failure
            this.router.navigate(['fail']);
       }
}

小心，由于您的 class，您的路由器可以通过这种方式访问，因此您必须使用 :

this.router.navigate

而不是

router.navigate

希望对您有所帮助

Answer 2

您需要将 angular router 注入到您的组件中，然后调用 navigate。

    export class MyClass {
      constructor(private router: Router) {}

      submitPost() {        
          this._adminLogin.postAdminLogin(this.adminLoginmodel).subscribe(
            data => {
              this.responseStatus = data;
              if(this.responseStatus.status.length > 0 && this.responseStatus.status === 1)
              {
                  this.router.navigate(['/successUrl']);
              }
              else
              {
                  this.router.navigate(['/errorUrl']);
              }
            },
        err => {
              console.log(err)
            },
        () => {}
    ); 
    this.status = true;       
    }
 }

Answer 3

您可以通过将 Angular 路由器注入 login.component.ts

来使用它

import { Router } from "@angular/router";

constructor(private router: Router){}

在你的 'Login Success'

this.router.navigate('dashboard');

Answer 4

希望这对您有所帮助。您只需将一个数组传递给 router.navigate 方法。

  import { Injectable } from '@angular/core';
  import { Router } from '@angular/router';

  @Injectable()
  export class ErrorHandlerService {
      constructor(private router: Router) {}

      public handleError(): void {
          this.router.navigate(['/your-redirect-path']).catch(() => {
               console.log('Navigation Failure');
          });
      }
  }

如何在收到成功状态时在 Angular2 中重定向？

How to redirect in Angular2 on receiving success status?

angular2-routing

angular