Question

关于组件在我的组件中如何解析组件而不是在我的相邻spec.ts文件中，我有一个奇怪的问题。

因此，请考虑我在tsconfig.json中位于项目文件夹根目录下的以下路径条目：

"@acme/core": [ "../acme/src" ]

可以看出，此映射是到磁盘上已经存在的acme模块的本地版本。

因此，在我使用从该模块导出的服务的组件ts文件中，

import { MyService } from '@acme/core'

当我将鼠标悬停在IDE（VS代码）中的模块引用上时，它表明它已从磁盘上的本地acme项目中正确提取。

但是，当我尝试对以相同方式导入服务的spec.ts文件执行相同操作时，它会从我的node_modules文件夹中引用该文件，默认情况下，该文件夹是从npm install（从私有仓库）中安装的。 >

我想知道为什么spec.ts文件不能以与根级别tsconfig.json文件相同的方式解析模块。

我希望我的spec文件能够解析我的本地项目模块，以便可以测试我所做的一些本地更改，就像我在组件ts文件中所做的一样。

这里可能出什么问题了？

谢谢

Answer 1

更新：

您可以尝试一些解决方法-

选项1

将virtualRowHeight更改为auto-[virtualRowHeight]="auto"。但这确实会影响扩展/折叠切换的性能。

选项2

在组件上使用ChangeDetectionStrategy.OnPush策略。但请注意其副作用（请阅读this以了解其工作原理）。请参阅this stackBlitz。

原始答案：

This issue已在版本10.0.3中修复。如果您感到好奇，请查看this commit来解决此问题。

此外，结帐this forked stackBlitz。它没有任何解决方法。

Answer 2

如Akash所述，later version of the library中的问题已得到修复，您可以检查所提到的BUG附带的更改，也可以在代码中应用此修复程序：

app.component.html

...
<p-treeTable #treeTable [value]="virtualFiles" [columns]="cols" [scrollable]="true
  [rows]="100">
  ...
</p-treeTable>

app.component.ts

...
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit, OnDestroy { 
    @ViewChild(TreeTable)
    private virtualTable: TreeTable;

    virtualFiles: TreeNode[];
    cols: any[];
  
    private virtualTableSub: Subscription;

    constructor(
        private nodeService: NodeService,
        private primengConfig: PrimeNGConfig,
        private cdr: ChangeDetectorRef
    ) { }
    ...
    ngAfterViewInit() {
      this.virtualTable.tableService.uiUpdateSource$.subscribe(() => {
        if (this.virtualTable.virtualScroll) {
          this.cdr.detectChanges();
        }
      })
    }

    ngOnDestroy() {
      this.virtualTableSub?.unsubscribe();
    }
    ...
}

看看this stackblitz。

模块在规范文件与组件文件中的解析方式不同

2 个答案: