Question

在将虚拟滚动实现到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），并将VirtualScrollerMoudle导入了我的app.module中。

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.要允许任何属性，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。

在寻找解决方案之后，我遇到了遇到类似问题但遇到了Ionic 3（https://github.com/rintoj/ngx-virtual-scroller/issues/85）及其他们的其他人解决方案是将VirtualScrollMoudle导入到其使用位置的子模块中，而不是全局应用程序模块中，并指示可能必须执行此操作对组件使用延迟加载。

不幸的是，我尝试失败。我尝试将VirtualScrollMoudle仅导入到app.module.ts中，该组件是正在使用的组件的父页面模块只能是虚拟的，并且两者都同时出现，但是遇到了相同的问题。

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

Answer 1

更新

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

由于我的 product-card-view.component 位于共享模块中，因此我需要在共享模块中导入虚拟滚动模块，而在两个应用程序中分别不导入.module.ts或父页面模块

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

我将保留这个答案，希望它能对以后遇到类似问题的任何人提供帮助

无法绑定到“项目”，因为它不是“虚拟卷轴”的已知属性

1 个答案: