Home / Questions / 229394
Accepted
Nacho
Asked: 2020-01-14 12:30:30 +0800 CST 2020-01-14 12:30:30 +0800 CST

如何在父级内部正确部署子级的路由器插座

  • 772

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

所以我在planet-routing.module.ts中对planet.module和canActivate使用了延迟加载（不相关），但是由于路由与URL段不匹配，因此无法导航到planet-detail。显示的错误：无法匹配任何路由。URL 段：“漫游者/411634”

我通过添加行星细节路径作为“漫游者”的孩子来“解决”这个问题。现在是我将路由器插座放在行星数据模板中的部分，一切都很好，直到我单击行星图像导航到该图像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

1 Answers

  1. Best Answer

    行星详细信息图像就在行星数据视图的下方。

    它加载在下方只是因为您<router-outlet>的行星列表中有以下内容。

    您planet-data.component.html应该只有<router-outlet>并且您的路线应该有一个要加载的组件，如示例中所示：

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

    您可以看到它被声明path: ''了两次：第一次是它加载的位置<router-outlet>和子项的声明。第二个是要加载到该路由器中的组件。

    正是在那一刻，您应该拥有planet-data.component.html 的HTML，在那里您拥有行星列表。（删除路由器线）。

    • 1