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

登录成功后角路由器不工作。 我有身份验证模块 在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。