我有类似的问题!我这边的问题是我导入了延迟加载的模块,因此路由定义对于应用程序路由器出口是可见的。
如果您需要示例,请随时发表评论。
更新: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 应用程序路由.模块:
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 主路由.模块:
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 主布局.模块:
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 主布局视图.组件:
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$;
}
}