时间戳

首页 > 解决方案 > 如何延迟加载并激活带有子路由的模块

angular - 如何延迟加载并激活带有子路由的模块

问题描述

当我想到使用登录视图来保护我的整个应用程序（使用警卫）并在用户想要导航 main.component（在本例中为planet.data）时强制用户登录时，我的想法就开始了。

所以我使用延迟加载（不相关）到planet.module 和canActivate 内planet-routing.module.ts 但之后我无法导航到planet-detail，因为路由无法匹配URL 段。

“我解决了”这个问题，将行星详细路线添加为“漫游者”的孩子。现在，当我将路由器插座放入行星数据中时，一切正常，直到我单击行星图像导航到该图像 ID。图像 ID 位于行星数据视图的正下方。我缺少什么？我想请您指出正确的方向。

预期行为：导航到图像 ID（仅该路线）在此处输入图像描述

// 行星数据.component.html

<div class="ui-g">
    <div class="ui-g-12 ui-md-12">
        <div class="ui-g-8">
            <app-title *ngIf="pics"></app-title>
        </div>
        <div class="ui-g-4">
            <app-dropdown-menu (selected)="onSelect($event)"></app-dropdown-menu>
        </div>
    </div>
    <div class="ui-g-12">
        <app-no-image class="margin" [cam]="true" [start]="true" *ngIf="!pics"></app-no-image>
    </div>
    <div>
    </div>
    <router-outlet></router-outlet>
    <app-planet-view class="image" [pics]="pics"></app-planet-view>    
</div>
<app-loader></app-loader>

// 行星细节.component.html

<div class="ui-g">
    <app-image [picById]="picById"></app-image>
</div>

// 行星路由.module.ts

const planetRoutes: Routes = [
    {
        path: '',
        component: PlanetDataComponent,
        children: [
            {
                path: ':id',
                component: PlanetDetailComponent,
                canActivate: [AuthGuardService] },
        ],
        canActivate: [AuthGuardService] },
    ];
@NgModule({
    imports: [
        RouterModule.forChild(planetRoutes)
    ],
    exports: [RouterModule],
})
export class PlanetRoutingModule {}

// app.routing-module.ts

const routes: Routes = [
  { path: 'rovers', loadChildren: './planet/planet.module#PlanetModule' },
  { path: '', pathMatch: 'full', redirectTo: '/home' }
];

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

// app.component.html

<header><app-header></app-header></header>
<main>
    <router-outlet></router-outlet>
</main>
<footer><app-footer></app-footer></footer>

标签： angular

解决方案

好吧，在一些帮助下，我可以解决这个问题，生成另一个组件并在子路由中声明它。父路由和第一个子路由都是 ''，所以在父路由中我刚刚放了 router-outlet，它就是要显示子路由的那个。第一个子路由它将显示演示数据。

// 行星路由.module.ts

const planetRoutes: Routes = [
    {
        path: '',
        component: PlanetComponent, -> Component generated to display child route
        canActivate: [AuthGuardService],
        children: [
            {
                path: '',
                component: PlanetDataComponent
            },
            {
                path: ':id',
                component: PlanetDetailComponent
            }
        ]
    }
];

//planet.component.html

<router-outlet></router-outlet>

推荐阅读