Angular：Material ui cdk-virtual-scroll-viewport 未按預期工作

Question

按照此處的官方文檔實現虛擬視口，但在 html 組件中收到以下錯誤消息：

錯誤信息

'cdk-virtual-scroll-viewport' is not a known element:
1. If 'cdk-virtual-scroll-viewport' is an Angular component, then verify that it is part of this module.
2. If 'cdk-virtual-scroll-viewport' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)

編碼：

模塊

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { ScrollDispatcher } from '@angular/cdk/scrolling';
import { CdkScrollableModule } from '@angular/cdk/scrolling';
import { SearchComponent } from './search.component';

@NgModule({
  declarations: [
    SearchComponent
  ],
  imports: [
    CommonModule,
    ScrollingModule,
    CdkScrollableModule,
    ScrollDispatcher
  ],
  bootstrap: [SearchComponent]
})
export class SearchModule { }

html

<cdk-virtual-scroll-viewport itemSize="1000" class="list-container lg">
  <div *cdkVirtualFor="let number of numbers" class="number">{{number}}</div>
</cdk-virtual-scroll-viewport>

零件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {

  numbers : number[] = [];

  constructor() {
     for (let i = 0; i<1000; i++) {
      this.numbers.push(i);
     }
   }

  ngOnInit(): void {
  }
}

配置

Angular CLI: 13.2.4
Node: 16.13.1
Package Manager: npm 8.3.1
OS: win32 x64

Angular: 13.2.3
... animations, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.4
@angular-devkit/build-angular   13.2.4
@angular-devkit/core            13.2.4
@angular-devkit/schematics      13.2.4
@angular/cdk                    13.2.4
@angular/cli                    13.2.4
@angular/flex-layout            13.0.0-beta.38
@schematics/angular             13.2.4
rxjs                            7.5.4
typescript                      4.5.5

有人能指出我正確的方向嗎？

Answer 1

這是一個進出口問題。 在我的應用程序中，我使用 Angular 的延遲加載功能，即在其自己的模塊中創建頁面/組件。 我有一個名為：core.module.ts 的共享模塊，我在導出中缺少 ScrollingModule 並且還缺少模式：[CUSTOM_ELEMENTS_SCHEMA]

例如

模塊 A 中的組件 A，模塊 B 中的組件 B，模塊 C 中的組件 C，共享模塊：core.module.ts

 import { ScrollingModule } from '@angular/cdk/scrolling';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  imports: [
     ScrollingModule,
  ],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ], // Must add this one.

   exports: [
        ScrollingModule,
   ]

});

export class CoreModule { }

帶有組件文件的組件 A：component-a.html、component-a.ts、component-a.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { CoreModule } from 'src/app/core/core.module';

@NgModule({
  declarations: [

  ],
  imports: [
    CommonModule,
    CoreModule,
  ],

})
export class ComponentAModule { }

我希望，這是有道理的，讓我知道這是否能解決問題。