Question

当我想到使用登录视图来保护我的整个应用程序（使用guards）并强迫用户登录main.component（在这种情况下为planet.data）时，我的想法就开始了。

所以我在Planet-routing.module.ts中使用了懒惰负载（无关）到planet.module和canActivate，但是在那之后我无法导航到planet-detail，因为路由无法匹配URL段。

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

预期的行为：导航至图片ID（仅该路线）

// planet-data.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>

// planet-detail.component.html

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

// planet-routing.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>

Answer 1

好吧，在一些帮助下，我可以解决此问题，生成另一个组件并将其在子级路由中声明。父路线和第一个子路线均为“”，因此在父路由中，我刚刚放到路由器出口的那一个将显示子路由。第一条子路线将显示演示数据。

// planet-routing.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>

如何延迟加载和canActive模块与子路由

1 个答案: