Question

我正在编写一个有角度的应用程序，该应用程序本身会根据某些决策将home.module延迟加载到''路径中，否则将加载其他模块

当home.module加载时，它会加载带有四个菜单选项的导航栏（单独的组件）。现在，当我单击任何项目时，我应该转到相应的模块。但是安格尔抱怨说它无法匹配任何路线。

这是我文件中的摘录

app-routing.ts

company_name

home-routing.ts

import { HomeGuardService } from './route-guard/home-guard.service';

const routes: Routes = [ 
    { 
    path: '', 
    pathMatch: 'full', 
    loadChildren: () => import('./components/home/home.module').then(mod => mod.HomeModule),
    canActivate: [HomeGuardService] }, 
    // other routes go here
 }]; 
 @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) 
 export class AppRoutingModule { }

search-routing.module.ts

import { HomeComponent } from './home.component'; 


const routes: Routes = [ { 
    path: '', 
    pathMatch: 'full', 
    component: HomeComponent, 
    children: [ 
        { 
            path: 'search', 
            pathMatch: 'full', 
            loadChildren: () => import('./search/search.module').then(mod => mod.SearchModule) 
        }, 
        { 
            path: '/settings', 
            pathMatch: 'full', 
            loadChildren: () => import('./settings/settings.module').then(mod => mod.SettingsModule) 
        }] 
    } ] 
    @NgModule({ imports: [ RouterModule.forChild(routes) ], exports: [ RouterModule ] }) 
    export class HomeRoutingModule { }

home-component.html

import { SearchComponent } from './search.component'; 

const routes: Routes = [ { path: '', component: SearchComponent } ]; 
@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class SearchRoutingModule { }

home-component.ts

<div>
    <div class="header">
        <app-header></app-header>
    </div>
    <div>
        <!-- main app content : routing content goes here -->
    </div>
    <div class="footer">
        <app-nav-menu (sendMenuSelection)="changeRoute($event)"></app-nav-menu>
    </div>
</div>

现在，nav-menu组件只有4个可单击的图标，这些事件将事件发送到home组件，如您在上面看到的。在component.ts中，尝试使用router.navigate导航到相应路径。

我希望在根路径上加载路由-/ search，/ settings等。

我是角度较新的人，希望能帮助我解决这个错误。

谢谢！

将子模块的子模块延迟加载到应用程序

0 个答案: