我的Angular项目中有一个登录组件,而且工作得很好。但是现在我把我的软件结构从单一模块改为懒加载模块。
我在Angular项目中创建了一个 PublicModule
与 LoginComponent
, ForgotPasswordComponent
和 RegistrationComponent
.
app.模块.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, Injector, LOCALE_ID, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthService } from './services/auth/auth.service';
import { AuthInterceptorService } from './services/auth/auth-interceptor.service';
export let InjectorInstance: Injector;
@NgModule({
declarations: [
AppComponent,
],
entryComponents: [],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
],
providers: [
{ provide: LOCALE_ID, useValue: 'hu-HU' },
{ provide: ErrorHandler, useClass: AppErrorHandler },
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptorService,
multi: true
},
AuthService,
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(private injector: Injector) {
InjectorInstance = this.injector;
}
}
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './services/auth/auth.guard';
import { DashboardComponent } from './components/dashboard/dashboard.component';
const routes: Routes = [
{ path: 'public', loadChildren: () => import('./modules/public/public.module').then(m => m.PublicModule) },
{ canActivate: [AuthGuard], path: '', component: DashboardComponent },
{ canActivate: [AuthGuard], path: '**', component: DashboardComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<div *ngIf="authService.user.value">
<!-- Logged in -->
<router-outlet></router-outlet>
</div>
<div *ngIf="!authService.user.value">
<!-- Not logged in -->
<app-login></app-login>
</div>
app.component.ts
import { Component } from '@angular/core';
import { AuthService } from './services/auth/auth.service';
import { InjectorInstance } from './app.module';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'My Awesome Project';
authService: AuthService = InjectorInstance.get<AuthService>(AuthService);
constructor() {
this.authService.autoLogin();
}
}
我在构建时和渲染时都没有得到任何错误。一切看起来都很好,但是 LoginComponent
不显示。
如果我登录 authService.user.value
它是空的,所以 <app-login></app-login>
应该是可见的,但它不是。
我知道应该从哪里寻找 "错误 "的原因吗?
我觉得不是代码本身的问题,更多的是概念的问题。
你正确地创建了懒惰加载模块下的 public
路径,这意味着当你去 /public
它将加载模块块(检查网络选项卡以确认)。这个模块应该也有路由功能,我是这样设置的。
const routes: Routes = [
{ path: 'forgot-password', component: ForgotPasswordComponent },
{ path: 'register', component: RegistrationComponent },
{ path: '', component: LoginComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PublicRoutingModule {}
当然,这个路由模块需要导入到你的公共模块中才行。
我注意到你有一个AuthGuard,它应该会检查用户是否登录。如果没有,应该会触发一个重定向到 /public
. 你可以在这里找到一个AuthGuard做重定向的片段 https:/twitter.commichelepatrassistatus1177193819848216576photo1。.
所以,你的模板变得很简单
<router-outlet></router-outlet>
如果用户已登录,则 router-outlet
将包含仪表盘。如果不包含,用户将被重定向至 public
并将包含登录组件(如果你遵循我提到的路由示例)。
将你的app.component.html改为:-。
<div *ngIf="authService?.user?.value">
<!-- Logged in -->
<router-outlet></router-outlet>
</div>
<div *ngIf="!authService?.user?.value">
<!-- Not logged in -->
<app-login></app-login>
</div>