您能帮我解决登录后我的 Angular 应用程序重定向到空白屏幕的问题吗？

Question

当我作为初学者尝试在我的网站上实现延迟加载时，遇到一个问题：登录后，登录页面将我重定向到空白屏幕。我该如何解决这个问题？

应用程序路由.moudle.ts

 const routes: Routes = [
  {
    path: '',
    component: WebsiteLayoutComponent,
    children: [
      {
        path: '',
        component: HomePageComponent // Home page component for website
      },
      {
        path: 'subcategory/:categoryId',
        component: SubcategoryPageComponent
      },
      {
        path: 'products',
        component: ProductPageComponent // Route for displaying search results
      },
      {
        path: 'product/:categoryId',
        component: ProductPageComponent
      },
      {
        path: 'product/:categoryId/:subcategoryId', // Route for products with subcategories
        component: ProductPageComponent
      },
      // Add other website routes here
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: 'swiper', component: SwiperComponent }, // Define a login route
  { 
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canActivate: [AuthGuard]
  },
  { path: '**', redirectTo: '' }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

管理路由模块.ts：

const adminRoutes: Routes = [
  {
    path: 'admin',
    component: AdminLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: '', redirectTo: 'brand-list', pathMatch: 'full' },
      { path: 'brand-list', component: BrandListComponent },
      { path: 'category-list/:brandId', component: CategoryListComponent },
      { path: 'add-category', component: AddCategoryComponent },
      { path: 'edit-category/:id', component: EditCategoryDialogComponent },
      { path: 'edit-subcategory/:id', component: EditSubcategoryDialogComponent },
      { path: 'subcategory-list', component: SubcategoryListComponent },
      { path: 'bycategory/:id', component: SubcategoryListComponent },
      { path: 'products/:subcategoryId', component: ProductListComponent },
      { path: 'product/:id', component: ProductPageComponent },
      { path: '**', redirectTo: 'brand-list' }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(adminRoutes)],
  exports: [RouterModule]
})
export class AdminRoutingModule {}

登录.component.ts：

export class LoginComponent {
  username: string = '';
  password: string = '';
  errorMessage: string = '';

  constructor(private authService: AuthService, private router: Router) {}

  async login(): Promise<void> {
    if (!this.username || !this.password) {
      this.showErrorMessage("Username and password are required.");
      return;
    }

    try {
      const loggedIn = await this.authService.login(this.username, this.password);
      if (loggedIn) {
        this.router.navigate(['/admin']);
      } else {
        this.showErrorMessage("Incorrect username or password.");
      }
    } catch (error) {
      console.error("Error during login:", error);
      this.showErrorMessage("An error occurred during login.");
    }
  }

  showErrorMessage(message: string): void {
    this.errorMessage = message;
  }
}

成功登录后，我希望登录页面将我路由到/admin

Answer 1

现在您的应用程序中没有

/admin

路线，但由于嵌套而有

/admin/admin

。你应该修复

admin-routing-module.ts

。

而不是

const adminRoutes: Routes = [
  {
    path: 'admin',
    ...
  }
];

应该只是

const adminRoutes: Routes = [
  {
    path: '',
    ...
  }
];