Javascript 角度，在页面的何处放置路由器oulet

我有一个Angular 8应用程序，我尝试让惰性加载工作

谷歌搜索了很多

看来一切都正常。但不是在正确的道路上。因为我有一个页面，在那个页面上有图标，你将被重定向到那个id为的独立页面

因此html模板如下所示：

 <app-topbar header="Hulpbronnen overzicht">
</app-topbar>
<!-- <app-vital10-page header="Hulpbronnen overzicht">
</app-vital10-page> -->

<div class="inner-body">
  <app-is-loading *ngIf="!resourcesLoaded" message="Hulpbronnen worden geladen"></app-is-loading>

  <app-no-entries
  *ngIf="!hasResources && resourcesLoaded"
  type="hulpbronnen"
  [loads]="resourcesLoaded"
  ></app-no-entries>
  <div class="mobile-resource-filter" (click)="showFilterForMobile = true" *ngIf="allResourceThemesKeys.length > 0">
    <span class="fa fa-filter"></span>
  </div>
  <div class="resources">
    <div class="resources-main">
      <div class="resource-row" *ngFor="let key of resourceThemesKeys" [@fade]>
        <h3 class="resource-row-title">{{ key }}</h3>
        <div class="resource-items">
          <app-resource-item *ngFor="let item of resourceThemes[key]" [resource]="item">

          </app-resource-item>

        </div>
      </div>
    </div>
    <div
    class="resources-side"
    *ngIf="allResourceThemesKeys.length > 0"
    [ngClass]="{'stuck-to-top': showFilterForMobile}"
    >
    <div class="resources-filter resource-row">
      <h3 class="resources-header resources-header-filter resource-row-title">Thema Filter</h3>
      <div class="resources-filter-body">
        <div class="resource-filter-item">
          <label for="filter-all" class="resources-filter-label">
              <input
              type="checkbox"
              class="resources-filter-input resources-filter-input-all"
                id="filter-all"
                (change)="filterAll(allOn)"
                [checked]="!allOn"
                />
                Filter alles
              </label>
              <div class="resource-filter-close" *ngIf="showFilterForMobile">
                <button type="button" class="button" (click)="showFilterForMobile = false">Sluit</button>
              </div>
            </div>
            <div class="resources-filter-item">
              <label for="{{ theme }}" class="resources-filter-label" *ngFor="let theme of allResourceThemesKeys">
                <input
                type="checkbox"
                id="{{ theme }}"
                class="resources-filter-input"
                [checked]="resourceThemesKeys.indexOf(theme) !== -1"
                (change)="handleFilterChange(theme)"
                />
                {{ theme }}
              </label>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <router-outlet></router-outlet>

const ResourceRouters: Routes = [
  {
    path: '',
    component: ResourcePageComponent,
    children: [
      {path: '', pathMatch: 'full', canActivate: [AuthGuard] },
      {path: 'detail/:hulpbronId', component: ResourceDetailComponent, canActivate: [AuthGuard]}
    ]
  }
];


@NgModule({

  imports: [
    RouterModule.forChild(ResourceRouters)
  ],
  exports: [RouterModule]



})

http://localhost:4200/hulpbronnen

{path: 'hulpbronnen', loadChildren: () => import('./resource/resource.module').then(m => m.ResourceModule)},

主url如下所示：

 <app-topbar header="Hulpbronnen overzicht">
</app-topbar>
<!-- <app-vital10-page header="Hulpbronnen overzicht">
</app-vital10-page> -->

<div class="inner-body">
  <app-is-loading *ngIf="!resourcesLoaded" message="Hulpbronnen worden geladen"></app-is-loading>

  <app-no-entries
  *ngIf="!hasResources && resourcesLoaded"
  type="hulpbronnen"
  [loads]="resourcesLoaded"
  ></app-no-entries>
  <div class="mobile-resource-filter" (click)="showFilterForMobile = true" *ngIf="allResourceThemesKeys.length > 0">
    <span class="fa fa-filter"></span>
  </div>
  <div class="resources">
    <div class="resources-main">
      <div class="resource-row" *ngFor="let key of resourceThemesKeys" [@fade]>
        <h3 class="resource-row-title">{{ key }}</h3>
        <div class="resource-items">
          <app-resource-item *ngFor="let item of resourceThemes[key]" [resource]="item">

          </app-resource-item>

        </div>
      </div>
    </div>
    <div
    class="resources-side"
    *ngIf="allResourceThemesKeys.length > 0"
    [ngClass]="{'stuck-to-top': showFilterForMobile}"
    >
    <div class="resources-filter resource-row">
      <h3 class="resources-header resources-header-filter resource-row-title">Thema Filter</h3>
      <div class="resources-filter-body">
        <div class="resource-filter-item">
          <label for="filter-all" class="resources-filter-label">
              <input
              type="checkbox"
              class="resources-filter-input resources-filter-input-all"
                id="filter-all"
                (change)="filterAll(allOn)"
                [checked]="!allOn"
                />
                Filter alles
              </label>
              <div class="resource-filter-close" *ngIf="showFilterForMobile">
                <button type="button" class="button" (click)="showFilterForMobile = false">Sluit</button>
              </div>
            </div>
            <div class="resources-filter-item">
              <label for="{{ theme }}" class="resources-filter-label" *ngFor="let theme of allResourceThemesKeys">
                <input
                type="checkbox"
                id="{{ theme }}"
                class="resources-filter-input"
                [checked]="resourceThemesKeys.indexOf(theme) !== -1"
                (change)="handleFilterChange(theme)"
                />
                {{ theme }}
              </label>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <router-outlet></router-outlet>

const ResourceRouters: Routes = [
  {
    path: '',
    component: ResourcePageComponent,
    children: [
      {path: '', pathMatch: 'full', canActivate: [AuthGuard] },
      {path: 'detail/:hulpbronId', component: ResourceDetailComponent, canActivate: [AuthGuard]}
    ]
  }
];


@NgModule({

  imports: [
    RouterModule.forChild(ResourceRouters)
  ],
  exports: [RouterModule]



})

http://localhost:4200/hulpbronnen

{path: 'hulpbronnen', loadChildren: () => import('./resource/resource.module').then(m => m.ResourceModule)},

例如，您的id为：

http://localhost:4200/hulpbronnen/detail/6688089b-9794-4169-8569-260d427bed03

但现在该id的内容将呈现在主页上，而不是他自己的组件上

必须是什么

在app.routes.ts中，我有这样的功能：

 <app-topbar header="Hulpbronnen overzicht">
</app-topbar>
<!-- <app-vital10-page header="Hulpbronnen overzicht">
</app-vital10-page> -->

<div class="inner-body">
  <app-is-loading *ngIf="!resourcesLoaded" message="Hulpbronnen worden geladen"></app-is-loading>

  <app-no-entries
  *ngIf="!hasResources && resourcesLoaded"
  type="hulpbronnen"
  [loads]="resourcesLoaded"
  ></app-no-entries>
  <div class="mobile-resource-filter" (click)="showFilterForMobile = true" *ngIf="allResourceThemesKeys.length > 0">
    <span class="fa fa-filter"></span>
  </div>
  <div class="resources">
    <div class="resources-main">
      <div class="resource-row" *ngFor="let key of resourceThemesKeys" [@fade]>
        <h3 class="resource-row-title">{{ key }}</h3>
        <div class="resource-items">
          <app-resource-item *ngFor="let item of resourceThemes[key]" [resource]="item">

          </app-resource-item>

        </div>
      </div>
    </div>
    <div
    class="resources-side"
    *ngIf="allResourceThemesKeys.length > 0"
    [ngClass]="{'stuck-to-top': showFilterForMobile}"
    >
    <div class="resources-filter resource-row">
      <h3 class="resources-header resources-header-filter resource-row-title">Thema Filter</h3>
      <div class="resources-filter-body">
        <div class="resource-filter-item">
          <label for="filter-all" class="resources-filter-label">
              <input
              type="checkbox"
              class="resources-filter-input resources-filter-input-all"
                id="filter-all"
                (change)="filterAll(allOn)"
                [checked]="!allOn"
                />
                Filter alles
              </label>
              <div class="resource-filter-close" *ngIf="showFilterForMobile">
                <button type="button" class="button" (click)="showFilterForMobile = false">Sluit</button>
              </div>
            </div>
            <div class="resources-filter-item">
              <label for="{{ theme }}" class="resources-filter-label" *ngFor="let theme of allResourceThemesKeys">
                <input
                type="checkbox"
                id="{{ theme }}"
                class="resources-filter-input"
                [checked]="resourceThemesKeys.indexOf(theme) !== -1"
                (change)="handleFilterChange(theme)"
                />
                {{ theme }}
              </label>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <router-outlet></router-outlet>

const ResourceRouters: Routes = [
  {
    path: '',
    component: ResourcePageComponent,
    children: [
      {path: '', pathMatch: 'full', canActivate: [AuthGuard] },
      {path: 'detail/:hulpbronId', component: ResourceDetailComponent, canActivate: [AuthGuard]}
    ]
  }
];


@NgModule({

  imports: [
    RouterModule.forChild(ResourceRouters)
  ],
  exports: [RouterModule]



})

http://localhost:4200/hulpbronnen

{path: 'hulpbronnen', loadChildren: () => import('./resource/resource.module').then(m => m.ResourceModule)},

所以我的问题是：我必须把

<router-outlet></router-outlet>

多谢各位

---

为了使子页面显示正确

，如果适合您，您可以尝试以下方法：

创建一个新组件

ResourceIndexComponent

——将

放入html模板中

以这种方式重组ResourceRoutes：

const ResourceRouters: Routes = [
  {
    path: '',
    component: ResourceIndexComponent,
    children: [
      { path: '', pathMatch: 'full', component: ResourcePageComponent, canActivate: [AuthGuard] },
      { path: 'detail/:hulpbronId', component: ResourceDetailComponent, canActivate: [AuthGuard] },
    ],
  },
];