Question

我在项目中使用了延迟加载。如果在成功登录后放置location.reload（），它将非常有效。但是这样做是不正确的。在不使用location.reload（）的情况下，它仅更改url，而不会加载子模块。

这是我的代码::

app.routing.ts

import { NgModule } from '@angular/core';
import {  Routes, RouterModule } from '@angular/router';
import { AuthGuardService } from 'src/app/Services/AuthenticationGuard/auth-guard.service';

export const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full', canActivate: [AuthGuardService] },
    { path: 'dashboard', loadChildren: './Component/dashboard/dashboard.module#DashboardModule', canActivate: [AuthGuardService] },
    { path: 'product', loadChildren: './Component/product/product.module#ProductModule', canActivate: [AuthGuardService] },
    { path: 'login', loadChildren: './Component/login/login.module#LoginModule' },
    { path: 'manageStock', loadChildren: './Component/manage-stock/manage-stock.module#ManageStockModule', canActivate: [AuthGuardService] },
    { path: '**', redirectTo: '' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: false })],
    exports: [RouterModule],
})

export class AppRoutingModule { }

AuthGuard.service.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRoute } from '@angular/router';
import { JwtHelper } from 'angular2-jwt';
import { CookieService } from 'angular2-cookie/core';
import { FrameworkService } from '../FrameworkService/frameworkService.service';

@Injectable()
export class AuthGuardService implements CanActivate {

    constructor(public router: Router, public frameworkService: FrameworkService, private route: ActivatedRoute, public _cookieService: CookieService) { }

    canActivate(): boolean {
        const jwtHelper: JwtHelper = new JwtHelper();
        const token = sessionStorage.getItem('token');

        if (token === null || token === undefined || token === '' || token === 'null') {

            this.router.navigate(['login']);
            this.frameworkService.baseService.login = false;
            return false;

        } else {

            if (token && !jwtHelper.isTokenExpired(token)) {

                this.frameworkService.baseService.login = true;
                return true;

            }
        }
    }
}

成功登录后，在我的登录组件中，我使用this.router.navigateByUrl('/')将其导航到仪表板。它成功地将其发送到仪表板，并且一切正常，但是当我单击产品时，如果刷新页面，那么在单击产品后，产品模块将无法加载。

子级路由服务之一

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductMasterComponent } from './productMaster/productMaster.component';
import { ProductDetailsComponent } from './productDetails/productDetails.component';
import { AuthGuardService } from 'src/app/Services/AuthenticationGuard/auth-guard.service';

const routes: Routes = [
    { path: '', component: ProductMasterComponent },
    { path: 'productDetails/:id', component: ProductDetailsComponent, canActivate: [AuthGuardService] }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})

export class ProductRoutingModule { }

编辑

根据需要单击产品：

    <li>
         <a asp-controller="Product" routerLink="/product">
         <i class="fa fa-table"></i> Products
 </a>
</li>

谢谢。

如果不重新加载appComponent

0 个答案: