延迟加载孩子不加载答案

【问题标题】：Lazy loading Children not loading延迟加载孩子不加载
【发布时间】：2022-01-20 12:07:13
【问题描述】：

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

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

AppRoutingModule：

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 {}

文件夹结构：

彩票游戏
- 彩票游戏详细信息
  - lottery-games-detail.component.ts
- 彩票游戏列表
  - lottery-games-list.component.ts
lottery-games.module.ts
lottery-games-routing.module.ts
lottery-games.component.ts

Lottery-games.component

<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>

我需要多一双眼睛。好像没找到

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

【问题讨论】：

如果应用程序匹配路由但您没有看到您的彩票游戏组件可能是 CSS 问题？你能看到 DOM 中的组件吗？
@NiccolòBiagi，不，他根本没有加载，我在 OnInit 中尝试了 console.log，但它没有显示日志。通常用CSS是没有错的。我在所有其他组件中都使用了它。它只是 div 的样式和 mat-card 的样式。没有其他的。在我添加延迟加载之前，我的组件正在工作，所以在这种情况下，我知道我的组件可以工作。我认为延迟加载有问题。

标签： angular typescript routes lazy-loading

【解决方案1】：

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

【讨论】：