延迟加载孩子不加载

Question

我有一个关于惰性模块的问题。 除了最后一个之外，我目前有多个惰性模块在工作。 我创建了一个带有两个子组件的惰性模块，但由于某种原因，页面未加载。

我已经尝试了很多事情。 添加了路径名，添加了 pathMatch: 'full' 但似乎没有任何效果。

应用程序路由模块：

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  //{ path: 'lottery-games', component: LotteryGamesComponent },
  //{ path: 'lottery-games/detail', component: LotteryGamesDetailComponent },
  {
    path: 'lottery-games',
    loadChildren: () =>
      import('./components/lottery-games/lottery-games.module').then((m) => m.LotteryGamesModule),
  },

第二个路由模块

const routes: Routes = [
  { path: '', component: LotteryGamesComponent },
  { path: 'detail', component: LotteryGamesDetailComponent },
];

@NgModule({
  imports: [CommonModule, RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class LotteryGamesRoutingModule {}

第二模块：

@NgModule({
  declarations: [LotteryGamesComponent, LotteryGamesDetailComponent, LotteryGamesListComponent],
  imports: [
    CommonModule,
    LotteryGamesRoutingModule,
    MatCardModule,
    MatFormFieldModule,
    FormsModule,
    MatTableModule,
    ReactiveFormsModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    MatCheckboxModule,
    MatAutocompleteModule,
    MatSelectModule,
    MatDialogModule,
  ],
})
export class LotteryGamesModule {}

文件夹结构：

• 彩票游戏
  • 彩票游戏详情
    • 彩票游戏-detail.component.ts
  • 彩票游戏列表
    • 彩票游戏列表.component.ts
• 彩票游戏.module.ts
• 彩票游戏路由.module.ts
• 彩票游戏.component.ts

彩票游戏.组件

<mat-card>
  <h2 class="title">Overzicht</h2>
  <hr />

  <mat-card-content>
    <ng-container *ngIf="lotteryGames$ | async as lotteryGamesList">
      <ng-container *ngIf="lotteryGamesList.length > 0">
        <app-lottery-games-list [LotteryGamesList]="lotteryGamesList"></app-lottery-games-list>
      </ng-container>

      <ng-container *ngIf="lotteryGamesList.length === 0 || lotteryGamesList === null">
        <div class="no-results">
          <p class="no-result-p">Geen resultaten gevonden</p>
        </div>
      </ng-container>
    </ng-container>
  </mat-card-content>
</mat-card>

我需要一双额外的眼睛。 好像没找到

我没有任何错误，所以看起来它找不到我的路线。 但是当我直接在地址栏中进入详细信息页面时，它就可以了。 只有父组件不起作用

Answer 1

我发现问题了。在我的模块中，我导入了组件，但路径是“..”，不起作用，并且花了很长时间才找到它。

Answer 2

如果您使用的是 Angular 15，请使用redirectTo: ''。

常量路线：路线= [ { 路径：''，redirectTo：''，组件： HomeComponent，路径匹配： '满的' }, ]

这对我有用！！