Angular6 登录成功后路由器导航不工作

Angular6 登录成功后路由器导航不工作,angular6,angular5,angular7,Angular6,Angular5,Angular7,登录成功后角路由器不工作。 我有身份验证模块 在Auth模块下,我有登录组件 我有管理模块 在管理模块下,我有3个组件 1) .admin组件 2) .管理仪表板 3) .blog组件 在admin.component.html中 写入(路由器出口)标签 //获取登录成功和用户数据 {“结果”:“成功”,“用户ID”:“U-001”,“用户名”:“超级管理员”,“用户电子邮件”:”admin@dw.com“} 如果结果是成功,请尝试重定向到管理组件。但它不起作用 请检查代码。我在哪里出错的 提前

登录成功后角路由器不工作。 我有身份验证模块 在Auth模块下,我有登录组件

我有管理模块 在管理模块下,我有3个组件 1) .admin组件 2) .管理仪表板 3) .blog组件

在admin.component.html中 写入(路由器出口)标签

//获取登录成功和用户数据

{“结果”:“成功”,“用户ID”:“U-001”,“用户名”:“超级管理员”,“用户电子邮件”:”admin@dw.com“}

如果结果是成功,请尝试重定向到管理组件。但它不起作用

请检查代码。我在哪里出错的

提前谢谢

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
//import { PreloadAllModules } from '@angular/router';
import { CustomPreloadingStrategyService } from './custom-preloading-strategy.service';
import { CustomPreloadingWithDealyStrategyService } from './custom-preloading-with-delay-strategy.service';

const routes: Routes = [
 {
 path:'',redirectTo:'/login',pathMatch:'full'
 },
 {
   path:'**',component:PageNotFoundComponent
 }
 ];

@NgModule({
 imports: [RouterModule.forRoot(routes,
   {
     preloadingStrategy:CustomPreloadingWithDealyStrategyService
   })],
   providers: [CustomPreloadingStrategyService,CustomPreloadingWithDealyStrategyService],
 exports: [RouterModule]
})
export class AppRoutingModule { }
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AlertModule } from 'ngx-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { MatToolbarModule, MatFormFieldModule, MatDatepickerModule, MatNativeDateModule, MatInputModule  } from '@angular/material';
import { HeaderComponent } from './header/header.component';
import { AuthService } from './auth/auth.service';
import { AdminModule } from './admin/admin.module';
import { AuthModule } from './auth/auth.module';
import { httpInterceptorProviders } from './http-interceptors/index';

@NgModule({
 declarations: [
   AppComponent, 
   PageNotFoundComponent, HeaderComponent ],

 imports: [
   BrowserModule,
   DragDropModule,
   FormsModule,
   ReactiveFormsModule,
   AlertModule.forRoot(),
   BrowserAnimationsModule,
   HttpClientModule,
   MatToolbarModule, 
   MatFormFieldModule, 
   MatInputModule, 
   MatDatepickerModule, 
   MatNativeDateModule,
   AdminModule,
   AuthModule,
   AppRoutingModule],

   exports: [MatToolbarModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatNativeDateModule,AdminModule,AuthModule],
 providers: [Title, AuthService,httpInterceptorProviders],
 bootstrap: [AppComponent]
})
export class AppModule { 
 constructor ()
 {
   console.log('App Module load');
 }
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { BlogsComponent } from './blogs/blogs.component';
import { AuthGuard } from '../auth/auth.guard';


const routes: Routes = [
   {
   path: 'admin',
   component: AdminComponent,
   canActivate: [AuthGuard],
   children: [
     {
     path: '',
     children: [
       { path: 'blogs', component: BlogsComponent },
       { path: '', component: AdminDashboardComponent }
     ],
   }
 ]
 }
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
   providers: [],
 exports: [RouterModule]
})
export class AdminRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule  } from '@angular/forms';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin/admin.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { BlogsComponent } from './blogs/blogs.component';


@NgModule({
 declarations: [AdminComponent, AdminDashboardComponent, BlogsComponent],
 imports: [
   CommonModule,ReactiveFormsModule,AdminRoutingModule
 ]
})
export class AdminModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
//import { PreloadAllModules } from '@angular/router';
import { CustomPreloadingStrategyService } from './custom-preloading-strategy.service';
import { CustomPreloadingWithDealyStrategyService } from './custom-preloading-with-delay-strategy.service';

const routes: Routes = [
 {
 path:'',redirectTo:'/login',pathMatch:'full'
 },
 {
   path:'**',component:PageNotFoundComponent
 }
 ];

@NgModule({
 imports: [RouterModule.forRoot(routes,
   {
     preloadingStrategy:CustomPreloadingWithDealyStrategyService
   })],
   providers: [CustomPreloadingStrategyService,CustomPreloadingWithDealyStrategyService],
 exports: [RouterModule]
})
export class AppRoutingModule { }
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AlertModule } from 'ngx-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { MatToolbarModule, MatFormFieldModule, MatDatepickerModule, MatNativeDateModule, MatInputModule  } from '@angular/material';
import { HeaderComponent } from './header/header.component';
import { AuthService } from './auth/auth.service';
import { AdminModule } from './admin/admin.module';
import { AuthModule } from './auth/auth.module';
import { httpInterceptorProviders } from './http-interceptors/index';

@NgModule({
 declarations: [
   AppComponent, 
   PageNotFoundComponent, HeaderComponent ],

 imports: [
   BrowserModule,
   DragDropModule,
   FormsModule,
   ReactiveFormsModule,
   AlertModule.forRoot(),
   BrowserAnimationsModule,
   HttpClientModule,
   MatToolbarModule, 
   MatFormFieldModule, 
   MatInputModule, 
   MatDatepickerModule, 
   MatNativeDateModule,
   AdminModule,
   AuthModule,
   AppRoutingModule],

   exports: [MatToolbarModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatNativeDateModule,AdminModule,AuthModule],
 providers: [Title, AuthService,httpInterceptorProviders],
 bootstrap: [AppComponent]
})
export class AppModule { 
 constructor ()
 {
   console.log('App Module load');
 }
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { BlogsComponent } from './blogs/blogs.component';
import { AuthGuard } from '../auth/auth.guard';


const routes: Routes = [
   {
   path: 'admin',
   component: AdminComponent,
   canActivate: [AuthGuard],
   children: [
     {
     path: '',
     children: [
       { path: 'blogs', component: BlogsComponent },
       { path: '', component: AdminDashboardComponent }
     ],
   }
 ]
 }
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
   providers: [],
 exports: [RouterModule]
})
export class AdminRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule  } from '@angular/forms';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin/admin.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { BlogsComponent } from './blogs/blogs.component';


@NgModule({
 declarations: [AdminComponent, AdminDashboardComponent, BlogsComponent],
 imports: [
   CommonModule,ReactiveFormsModule,AdminRoutingModule
 ]
})
export class AdminModule { }

admin.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
//import { PreloadAllModules } from '@angular/router';
import { CustomPreloadingStrategyService } from './custom-preloading-strategy.service';
import { CustomPreloadingWithDealyStrategyService } from './custom-preloading-with-delay-strategy.service';

const routes: Routes = [
 {
 path:'',redirectTo:'/login',pathMatch:'full'
 },
 {
   path:'**',component:PageNotFoundComponent
 }
 ];

@NgModule({
 imports: [RouterModule.forRoot(routes,
   {
     preloadingStrategy:CustomPreloadingWithDealyStrategyService
   })],
   providers: [CustomPreloadingStrategyService,CustomPreloadingWithDealyStrategyService],
 exports: [RouterModule]
})
export class AppRoutingModule { }
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AlertModule } from 'ngx-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { MatToolbarModule, MatFormFieldModule, MatDatepickerModule, MatNativeDateModule, MatInputModule  } from '@angular/material';
import { HeaderComponent } from './header/header.component';
import { AuthService } from './auth/auth.service';
import { AdminModule } from './admin/admin.module';
import { AuthModule } from './auth/auth.module';
import { httpInterceptorProviders } from './http-interceptors/index';

@NgModule({
 declarations: [
   AppComponent, 
   PageNotFoundComponent, HeaderComponent ],

 imports: [
   BrowserModule,
   DragDropModule,
   FormsModule,
   ReactiveFormsModule,
   AlertModule.forRoot(),
   BrowserAnimationsModule,
   HttpClientModule,
   MatToolbarModule, 
   MatFormFieldModule, 
   MatInputModule, 
   MatDatepickerModule, 
   MatNativeDateModule,
   AdminModule,
   AuthModule,
   AppRoutingModule],

   exports: [MatToolbarModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatNativeDateModule,AdminModule,AuthModule],
 providers: [Title, AuthService,httpInterceptorProviders],
 bootstrap: [AppComponent]
})
export class AppModule { 
 constructor ()
 {
   console.log('App Module load');
 }
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { BlogsComponent } from './blogs/blogs.component';
import { AuthGuard } from '../auth/auth.guard';


const routes: Routes = [
   {
   path: 'admin',
   component: AdminComponent,
   canActivate: [AuthGuard],
   children: [
     {
     path: '',
     children: [
       { path: 'blogs', component: BlogsComponent },
       { path: '', component: AdminDashboardComponent }
     ],
   }
 ]
 }
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
   providers: [],
 exports: [RouterModule]
})
export class AdminRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule  } from '@angular/forms';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin/admin.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { BlogsComponent } from './blogs/blogs.component';


@NgModule({
 declarations: [AdminComponent, AdminDashboardComponent, BlogsComponent],
 imports: [
   CommonModule,ReactiveFormsModule,AdminRoutingModule
 ]
})
export class AdminModule { }

admin.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
//import { PreloadAllModules } from '@angular/router';
import { CustomPreloadingStrategyService } from './custom-preloading-strategy.service';
import { CustomPreloadingWithDealyStrategyService } from './custom-preloading-with-delay-strategy.service';

const routes: Routes = [
 {
 path:'',redirectTo:'/login',pathMatch:'full'
 },
 {
   path:'**',component:PageNotFoundComponent
 }
 ];

@NgModule({
 imports: [RouterModule.forRoot(routes,
   {
     preloadingStrategy:CustomPreloadingWithDealyStrategyService
   })],
   providers: [CustomPreloadingStrategyService,CustomPreloadingWithDealyStrategyService],
 exports: [RouterModule]
})
export class AppRoutingModule { }
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AlertModule } from 'ngx-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { MatToolbarModule, MatFormFieldModule, MatDatepickerModule, MatNativeDateModule, MatInputModule  } from '@angular/material';
import { HeaderComponent } from './header/header.component';
import { AuthService } from './auth/auth.service';
import { AdminModule } from './admin/admin.module';
import { AuthModule } from './auth/auth.module';
import { httpInterceptorProviders } from './http-interceptors/index';

@NgModule({
 declarations: [
   AppComponent, 
   PageNotFoundComponent, HeaderComponent ],

 imports: [
   BrowserModule,
   DragDropModule,
   FormsModule,
   ReactiveFormsModule,
   AlertModule.forRoot(),
   BrowserAnimationsModule,
   HttpClientModule,
   MatToolbarModule, 
   MatFormFieldModule, 
   MatInputModule, 
   MatDatepickerModule, 
   MatNativeDateModule,
   AdminModule,
   AuthModule,
   AppRoutingModule],

   exports: [MatToolbarModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatNativeDateModule,AdminModule,AuthModule],
 providers: [Title, AuthService,httpInterceptorProviders],
 bootstrap: [AppComponent]
})
export class AppModule { 
 constructor ()
 {
   console.log('App Module load');
 }
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { BlogsComponent } from './blogs/blogs.component';
import { AuthGuard } from '../auth/auth.guard';


const routes: Routes = [
   {
   path: 'admin',
   component: AdminComponent,
   canActivate: [AuthGuard],
   children: [
     {
     path: '',
     children: [
       { path: 'blogs', component: BlogsComponent },
       { path: '', component: AdminDashboardComponent }
     ],
   }
 ]
 }
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
   providers: [],
 exports: [RouterModule]
})
export class AdminRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule  } from '@angular/forms';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin/admin.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { BlogsComponent } from './blogs/blogs.component';


@NgModule({
 declarations: [AdminComponent, AdminDashboardComponent, BlogsComponent],
 imports: [
   CommonModule,ReactiveFormsModule,AdminRoutingModule
 ]
})
export class AdminModule { }

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Route, Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AuthService } from '../auth.service';
import { Loginuser } from './loginuser';

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 submitted = false;
 LoginForm:FormGroup;
 SuccessAlert : string;
 WarningAlert : string;
 showSuccessAlert = false;
 showWarningAlert = false;
 isLoggedIn : boolean
 constructor(private router:Router,private fb: FormBuilder, private authservice: AuthService) 
 { 
   this.LoginForm = fb.group({
     emailid: ['', Validators.compose([Validators.required])],
     password: ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(8)])],
   })
 }

 ngOnInit() {
   this.authservice.logout();
 }

 LogInUser(){
   let login = this.LoginForm.value;
   this.checklogin(login);
 }
 checklogin(loginUser: Loginuser){
   this.authservice.userlogin(loginUser).subscribe(
     data =>{
        if(data["result"]=="success"){
          this.showSuccessAlert = true;
          this.SuccessAlert = data["result"];
          this.LoginForm.reset();
          localStorage.setItem("currentUser", JSON.stringify(data));
          this.isLoggedIn = true;
          this.router.navigate(['/admin']);
        }  
        else
        {
          this.showWarningAlert = true;
          this.WarningAlert = data["result"];
        }
     }
   )
 }
}

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
 providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanActivateChild {

 constructor(private router: Router, private authservice: AuthService){}
 canActivate(
   next: ActivatedRouteSnapshot,
   state: RouterStateSnapshot): boolean | UrlTree {
     if(this.authservice.isLoggedIn) {
       return true
     }
     else
     {
       return false
       this.router.navigate(['/login']);
     }      
 }
 canActivateChild(
   next: ActivatedRouteSnapshot,
   state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
   return this.canActivate(next, state);
 }
}

从'@angular/core'导入{Component,OnInit};
从'@angular/Router'导入{Route,Router};
从'@angular/forms'导入{FormGroup,FormBuilder,Validators};
从“../auth.service”导入{AuthService};
从“/Loginuser”导入{Loginuser};
@组成部分({
选择器:“应用程序登录”,
templateUrl:'./login.component.html',
样式URL:['./login.component.css']
})
导出类LoginComponent实现OnInit{
提交=错误;
LoginForm:FormGroup;
成功者:字符串;
警告:字符串;
showsccessalert=false;
showWarningAlert=false;
伊斯洛格丁:布尔型
构造函数(专用路由器:路由器,专用fb:FormBuilder,专用authservice:authservice)
{ 
this.LoginForm=fb.group({
emailid:['',Validators.compose([Validators.required]),
密码:['',Validators.compose([Validators.required,Validators.minLength(8),Validators.maxLength(8)],
})
}
恩戈尼尼特(){
this.authservice.logout();
}
登录用户(){
让login=this.LoginForm.value;
这个.checklogin(login);
}
检查登录(登录用户:登录用户){
this.authservice.userlogin(loginUser.subscribe)(
数据=>{
如果(数据[“结果”]=“成功”){
this.showsccessalert=true;
this.SuccessAlert=数据[“结果”];
此参数为.LoginForm.reset();
setItem(“currentUser”,JSON.stringify(data));
this.isLoggedIn=true;
this.router.navigate(['/admin']);
}  
其他的
{
this.showWarningAlert=true;
this.WarningAlert=数据[“结果”];
}
}
)
}
}
auth.guard.ts
从“@angular/core”导入{Injectable};
从'@angular/Router'导入{CanActivate,CanActivateChild,CanLoad,Route,UrlSegment,ActivatedRouteSnapshot,RouterStateSnashot,UrlTree,Router};
从“rxjs”导入{Observable};
从“/auth.service”导入{AuthService};
@注射的({
providedIn:'根'
})
导出类AuthGuard实现CanActivate、CanActivateChild{
构造函数(专用路由器:路由器,专用authservice:authservice){}
激活(
下一步:ActivatedRouteSnapshot,
状态:RouterStateSnapshot):布尔| UrlTree{
if(this.authservice.isLoggedIn){
返回真值
}
其他的
{
返回错误
this.router.navigate(['/login']);
}      
}
激活儿童(
下一步:ActivatedRouteSnapshot,
状态:RouterStateSnashot):可观察的|承诺|布尔| UrlTree{
返回this.canActivate(下一步,状态);
}
}

问题出在路由器上。导航不重定向的

测试以下代码以解决问题:

this.router.navigate(["../admin"]);


router.navigate无法直接工作,因为queryParams是可观察的,所以您无法以这种方式从中获取参数

试试这个

这个.router.navigate['../admin']

这对我来说很有用

import { Location } from '@angular/common';
import { Router } from '@angular/router';

this.location.replaceState('/');
this.router.navigate(['home']);
this.location.replaceState


用于替换历史记录而不是推送,因此如果用户返回,它将不会返回到用户所在的url,而是之前的url。

谢谢@mojtaba。我可以知道为什么router.navigate不是working@konda可能是因为您没有使用延迟加载将admin-routing.module添加到app.module,因为我认为这是您想要做的。在您的app.module.ts:,{path:'',loadChildren:'./admin/admin.module#AdminModule',canLoad:[AuthGuard]}中尝试此操作。您需要在AuthGuard中加载canLoad。在AuthGuard中尝试类似的操作:canLoad(route:route){if(this.authService.isAuth()){return true;}else{this.router.navigate(['/login']);}。完成所有这些之后,您的解决方案可能会正常工作,而不需要navigateByUrl。路由上的延迟加载需要具有canLoad。