Ionic Angular应用中子组件无法滚动问题排查

开发的Ionic Angular应用中，集成了toolbar与header的布局组件，但子组件无法实现滚动功能。布局未定义阻塞ViewModel的内容，子组件输入控件可正常访问，不确定是否是组件包裹方式错误或底层元素无法访问导致的问题。

布局组件（Layout.html）代码 #

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>{{(organization | async)?.name}}</ion-title>
      <ion-menu-toggle right>
        <button ion-button menuToggle right class="menu-button">
          <ion-icon class="menu-icon"src="../../../assets/icons/menu.svg"></ion-icon>
      </button>
    </ion-menu-toggle>
    </ion-toolbar>
  </ion-header>
  <ion-menu contentId="main-content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Meny</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-list>
        <ion-item class="clickable ion-activatable">
          <button color="primary" ion-button size="large" [routerLink]="['/manageusers']"class="clickable ion-activatable">
            <ion-icon slot="start" name="person-add-outline"></ion-icon>
            Legg til bruker
          </button>
        </ion-item>
          <ion-item class="clickable ion-activatable">
            <button color="primary" ion-button size="large" [routerLink]="['/manageorganization']"class="clickable ion-activatable">
              <ion-icon slot="start" name="briefcase-outline"></ion-icon>
              Organisasjon
            </button>
          </ion-item>
        <ion-item class="clickable ion-activatable">
          <button color="primary" ion-button size="large" [routerLink]="['/login']"class="clickable ion-activatable" (click)="this.accountService.logout()">
            <ion-icon slot="start" name="log-out-outline"></ion-icon>
            Logg ut
          </button>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

<ion-router-outlet></ion-router-outlet>

<ion-item-group>
  <ion-item *ngIf="this.openQrCode">
  <zxing-scanner
  (scanSuccess) = "scanSuccessHandler($event)"
  (scanError)= "scanErrorHandler($event)"
  ></zxing-scanner>
</ion-item>
</ion-item-group>
<ion-item-group>
<ion-fab slot="fixed" vertical="bottom" horizontal="end">
  <ion-fab-button>
    <ion-icon color="success"name="search-outline"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="start">
    <ion-fab-button>
      <ion-icon name="accessibility-outline"></ion-icon>
    </ion-fab-button>
    <ion-fab-button>
      <ion-icon name="cube-outline"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>
</ion-item-group>


<ion-item-group>
<ion-tabs>
  <ion-router-outlet></ion-router-outlet>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon src="../../../assets/icons/box-search.svg"></ion-icon>
      Hjem
    </ion-tab-button>
    <ion-tab-button (click)="onOpenQrScanner()"color="secondary-contrast" tab="radio">
      <ion-icon color="tertiary" name="qr-code-outline"></ion-icon>
      Skanner
    </ion-tab-button>
    <ion-tab-button tab="manageequipment" >
      <ion-icon src="../../../assets/icons/add_equipment.svg"></ion-icon>
      Legg til utstyr
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
</ion-item-group>

子组件（Homepage.html）代码 #

<ion-item-group
    *ngIf="{
      equipments: equipments | async,
      locations: locations | async
    } as observables"
>
<ion-list>
    <ion-card class="card" *ngFor="let equipment of (observables.equipments || [])">
      <ion-icon class="card-icon" src="../../../assets/icons/is-available.svg"></ion-icon>
      <ion-card-title class="card card-title">{{equipment.name}}</ion-card-title>
      <ion-card-subtitle class="card" *ngIf="observables.locations">
        Lokasjon: {{getLocationForEquipment(equipment.locationid, observables.locations)?.name || "Ingen satt lokasjon"}}
      </ion-card-subtitle>

      <ion-card-subtitle class="card">
        Status:<span>
          <p *ngIf="equipment.active">Aktiv</p>
          <p *ngIf="!equipment.active">Inaktiv</p>
        </span>

      </ion-card-subtitle>

      <ion-card-subtitle class="card" *ngIf="equipment.model != 'string'">
        Model: {{equipment.model}}
      </ion-card-subtitle>

      <ion-card-subtitle class="card" *ngIf="equipment.serialnumber != 'string'">
        Serienummer: {{equipment.serialnumber}}
      </ion-card-subtitle>

    </ion-card>
  </ion-list>
  </ion-item-group>
  <ion-content>

1. 子组件的可滚动内容未包裹在<ion-content>标签内，Ionic的滚动功能依赖<ion-content>提供滚动容器和配套样式，直接放置内容无法触发滚动机制。
2. 子组件代码中的<ion-content>标签未闭合，属于语法错误，会导致组件渲染异常。

修改子组件Homepage.html代码，将所有可滚动内容包裹在闭合的<ion-content>标签内：

<ion-content>
  <ion-item-group
    *ngIf="{
      equipments: equipments | async,
      locations: locations | async
    } as observables"
  >
    <ion-list>
      <ion-card class="card" *ngFor="let equipment of (observables.equipments || [])">
        <ion-icon class="card-icon" src="../../../assets/icons/is-available.svg"></ion-icon>
        <ion-card-title class="card card-title">{{equipment.name}}</ion-card-title>
        <ion-card-subtitle class="card" *ngIf="observables.locations">
          Lokasjon: {{getLocationForEquipment(equipment.locationid, observables.locations)?.name || "Ingen satt lokasjon"}}
        </ion-card-subtitle>

        <ion-card-subtitle class="card">
          Status:<span>
            <p *ngIf="equipment.active">Aktiv</p>
            <p *ngIf="!equipment.active">Inaktiv</p>
          </span>
        </ion-card-subtitle>

        <ion-card-subtitle class="card" *ngIf="equipment.model != 'string'">
          Model: {{equipment.model}}
        </ion-card-subtitle>

        <ion-card-subtitle class="card" *ngIf="equipment.serialnumber != 'string'">
          Serienummer: {{equipment.serialnumber}}
        </ion-card-subtitle>
      </ion-card>
    </ion-list>
  </ion-item-group>
</ion-content>

布局组件结构无需调整，子组件通过<ion-router-outlet>加载后，只要正确使用<ion-content>包裹内容，就能正常触发滚动。

内容的提问来源于stack exchange，提问作者Maffe