3

我在我的 ionic 4 + Angular 项目中实现虚拟滚动时遇到问题。

以前，我使用了 ionic 的虚拟滚动（ion-virtual-scroll）实现，它最初工作得很好，但遇到了一个可以说是它不支持我的应用程序所需的 ionic 网格视图的警告。（Ionic 已经在“功能请求”下的回购协议中承认了这一点：https ://github.com/ionic-team/ionic/issues/16632 ）

与此同时，我使用了 ngx-virtual-scroller ( https://github.com/rintoj/ngx-virtual-scroller )，因为它提供了多列支持

但是，我无法在我的项目中使用。

我已经通过 npm (npm install ngx-virtual-scroller --save) 安装了它，并在我的 app.module 中导入了 VirtualScrollerMoudle

app.module.ts

import { VirtualScrollerModule } from 'ngx-virtual-scroller'

imports: [
    ...
    VirtualScrollerModule
],

我已经在我的组件视图中将 virtual-scroller 标签包裹在我的元素周围

product-card-view.component.html

<virtual-scroller #scroll [items]="productsArray">
  <div *ngIf="columnViewActive; else listView">
    <ion-row>
      <ion-col size="6" *ngFor="let p of scroll.viewPortItems">
        <ion-card>
          <ion-card-header>
            <a class="productTitleColumn" title="{{ p.title }}" href="{{ p.link }}">{{ p.title }}</a>
          </ion-card-header>
          <ion-card-content>
            ..... ETC .....
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </div>
</virtual-scroller>

但我收到此错误

控制台错误

core.js:9110 错误错误：未捕获（承诺中）：错误：模板解析错误：无法绑定到“项目”，因为它不是“虚拟滚动条”的已知属性。1. 如果“virtual-scroller”是一个 Angular 组件并且它有“items”输入，那么验证它是这个模块的一部分。2. 如果“virtual-scroller”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。3. 允许任何属性将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。

在寻找解决方案后，我遇到了遇到类似问题但使用 Ionic 3（https://github.com/rintoj/ngx-virtual-scroller/issues/85）的其他人，他们的解决方案是将 VirtualScrollMoudle 导入使用它而不是全局应用程序模块的子模块，并表明它可能与对组件使用延迟加载有关。

不幸的是，我尝试这样做无济于事。我尝试仅将 VirtualScrollMoudle 导入 app.module.ts，该组件的父页面模块仅使用 virtual-scoller 并且同时使用两者但遇到了相同的问题。

home.module.ts

import { VirtualScrollerModule } from 'ngx-virtual-scroller'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    FontAwesomeModule,
    ProductSharedModule,
    HeaderFooterSharedModule,
    HideHeaderSharedModule,
    VirtualScrollerModule
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

我还确保导入语句位于底部，正如我所看到的那样，它设法吸引了很多人（包括过去的我自己）

有什么解决方案还是我错过了一些非常明显的东西？

版本：

离子 4 (5.4.4)

角度：8.1.3

4

1 回答 1

6

更新

非常感谢@Reactgular，我已经解决了问题！

由于我的product-card-view.component在共享模块中，我需要在共享模块中导入虚拟滚动模块，而不是在 app.module.ts 或父页面模块中单独导入

产品-shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { VirtualScrollerModule } from 'ngx-virtual-scroller';

// Product card component
import { ProductCardViewComponent } from '../../components/products/product-card-view/product-card-view.component';

@NgModule({
  declarations: [ProductCardViewComponent],
  imports: [CommonModule, IonicModule, FontAwesomeModule, VirtualScrollerModule],
  exports: [ProductCardViewComponent]
})
export class ProductSharedModule { }

我会留下这个答案，希望它可以帮助将来遇到类似问题的任何人

于 2019-12-11T07:06:37.943 回答