我正在尝试使用 Angular 9 开发 SPA,我几乎尝试延迟加载每个组件及其所有子组件。当我尝试在一个延迟加载的组件中使用路由器 socket 并且我希望此路由器 socket 用于加载子组件(这也是延迟加载的)时,我的问题出现了。
当我这样做时,我总是将所有嵌套的延迟加载组件加载到 app.component.html 的主路由器 socket 中,而不是嵌套延迟加载组件中的路由器 socket
app.component 模板:
<app-navbar></app-navbar>
<router-outlet></router-outlet>
应用程序路由模块:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'articles', loadChildren: () => import('./articles-viewer/articles-viewer.module').then(m => m.ArticlesViewerModule) },
{ path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
{ path: '**', redirectTo: ''}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
应用程序模块:
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
NavbarComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
AppAngularMaterial
],
providers: [
AppHttpInterceptors
],
bootstrap: [AppComponent]
})
export class AppModule { }
navbar.component 模板:
<a routerLink="">Home</a>
<a routerLink="/articles">Articles</a>
<a routerLink="/dashboard">Dashboard</a>
仪表板模板:
<a routerLink="statistics">Statistics</a>
<router-outlet></router-outlet>
仪表板.模块:
@NgModule({
declarations: [DashboardComponent],
imports: [
CommonModule,
DashboardRoutingModule,
AppAngularMaterial
]
})
export class DashboardModule { }
仪表板-routing.module:
const routes: Routes = [
{ path: '', component: DashboardComponent },
{ path: 'statistics', loadChildren: () => import('./statistics/statistics.module').then(m => m.StatisticsModule) }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
简而言之,统计组件(一个延迟加载的组件)被加载到 app.component 模板中声明的 router-outlet 中,而不是仪表板模板中的 router-outlet 中,并且仪表板组件被卸载
我试图在 angular.io 中找到解决方案,但我得到的只是在同一个组件中管理多个 socket 。另外,这就是我在谷歌搜索这个问题时得到的。
有什么解决办法吗?
最佳答案
我有一个类似的问题!我这边的问题是我导入了延迟加载的模块,因此路由定义对于应用程序路由器导出是可见的。
如果您需要示例,请随时发表评论。
更新:2021-08-24 添加了完整的代码示例
以下示例可以无限扩展:
文件夹结构:
1 应用程序模块:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { CoreModule } from "@core/core.module";
import { AppRoutingModule } from "@routes/app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, CoreModule, AppRoutingModule, BrowserAnimationsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
2 应用程序组件:import { Component } from "@angular/core";
@Component({
selector: "rot-root",
template: ` <router-outlet></router-outlet> `, // <===== ROOT ROUTER-OUTLET
styleUrls: ["./app.component.scss"],
})
export class AppComponent {}
3 app-routing.module:import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
export const ROUTES: Routes = [
{
path: "",
pathMatch: "prefix",
loadChildren: () =>
import("./main/main-routing.module").then((m) => m.MainRoutingModule),
},
];
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(ROUTES, { enableTracing: false })
],
exports: [RouterModule],
})
export class AppRoutingModule {}
4 main-routing.module:import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { layoutModules } from "./layouts";
import { MainLayoutViewComponent } from "./layouts/main-layout/views";
export const SUBROUTES: Routes = [
{
path: "",
pathMatch: "prefix",
component: MainLayoutViewComponent, // <==== DISPLAYED IN ROOT ROUTER-OUTLET
children: [ // <==== CHILDREN ARE DISPLAYED IN SUB ROUTER-OUTLET (6)
{
path: "dashboard",
loadChildren: () => import("./dashboard/dashboard.module").then(m => m.DashboardModule)
},
// <==== A LOT OF ROUTES FROM THE MAIN FOLDER - SAME AS DASHBOARD ====>
],
},
];
@NgModule({
declarations: [],
imports: [
RouterModule.forChild(SUBROUTES),
...layoutModules
],
exports: [RouterModule],
})
export class MainRoutingModule {}
5 main-layout.module:import { NgModule } from "@angular/core";
import { SharedModule } from "@shared/shared.module";
// material modules
// <==== a lot of material imports :D ====>
// module components
import { views } from "./views"; // <===== HERE I IMPORT THE MAIN-LAYOUT-VIEW
import { containers } from "./containers";
import { components } from "./components";
@NgModule({
declarations: [...views, ...containers, ...components],
imports: [
SharedModule,
// <==== a lot of material imports :D ====>
],
})
export class MainLayoutModule {}
6 main-layout-view.component:import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import { SidenavService } from "@core/services";
@Component({
selector: "rot-main-layout-view",
template: `
<rot-main-navbar></rot-main-navbar>
<mat-drawer-container autosize hasBackdrop>
<mat-drawer mode="over" [opened]="opened$ | async">
<rot-main-sidenav></rot-main-sidenav>
</mat-drawer>
<div class="content-wrapper">
<router-outlet></router-outlet> <==== SUB ROUTER-OUTLET
</div>
</mat-drawer-container>
`,
styleUrls: ["./main-layout-view.component.scss"],
})
export class MainLayoutViewComponent implements OnInit {
constructor(private _sidenavService: SidenavService) {}
ngOnInit(): void {}
get opened$(): Observable<boolean> {
return this._sidenavService.opened$;
}
}
关于nested - Angular 9 嵌套延迟加载模块,带有嵌套路由器导出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62334884/