在 Angular 独立组件中将组件作为数组导入

Question

我使用独立组件创建了一个库。 在这个库中，我将相关组件导出到数组中，如下所示：

export const TABLE_COMPONENTS: Type<any>[] = [
  TableComponent,
  TableHeaderComponent,
  TableBodyRowDirective,
  TableHeaderRowDirective,
  TableBodyEmptyRowDirective,
  TableFooterRowDirective,
  TableFirstRowDirective,
  TableFilterIconDirective,
  TableLastRowDirective
];

但是当我尝试在消费应用程序中使用这个数组时，它不起作用。 我尝试过这样的：

imports: [
    TABLE_COMPONENTS
],

但是我收到错误“‘imports’必须是组件、指令、管道或 NgModules 的数组。值是对‘TABLE_COMPONENTS’的引用”。我也尝试过：

• 使用展开运算符“展平”数组
• 将组件导出为

  Provider[]

  或

  any[]

• 导出组件而不指定数组类型

我什至尝试使用与官方 Angular 指南中相同的语法

export const TABLE_COMPONENTS = [
  TableComponent,
  TableHeaderComponent,
  TableBodyRowDirective,
  TableHeaderRowDirective,
  TableBodyEmptyRowDirective,
  TableFooterRowDirective,
  TableFirstRowDirective,
  TableFilterIconDirective,
  TableLastRowDirective
] as const;

这种语法的奇怪之处在于，vscode 不会抱怨，但是，我在编译过程中收到了上面的错误。

有谁知道如何将相关组件导出到数组中以便一次性导入它们而不是一个一个地导入？

更新：

我忘记提及的一件重要的事情是，我有一个这个库的 Playground 应用程序，它直接引用它（所以不是通过 npm 链接或通过安装包），并且它可以工作。当我从安装它的不同应用程序使用该库时，似乎会出现此问题。

Answer 1

问题在于您正在按照设置的方式创建二维数组。

export const TABLE_COMPONENTS: Type<any>[] = [
  TableComponent,
  TableHeaderComponent,
  TableBodyRowDirective,
  TableHeaderRowDirective,
  TableBodyEmptyRowDirective,
  TableFooterRowDirective,
  TableFirstRowDirective,
  TableFilterIconDirective,
  TableLastRowDirective
];


imports: [
    TABLE_COMPONENTS
],

在此之后，您的

imports

将是一个包含 1 个元素的数组，它本身就是一个数组。如果您使用扩展运算符，它应该按您的预期工作：

imports: [
    ...TABLE_COMPONENTS
]

您可能还需要从

Type<any>[]

中删除

TABLE_COMPONENTS

键入以强制执行它

这是一个有效的 StackBlitz 示例，显示它无需输入即可按预期工作，并使用展开运算符：StackBlitz 示例

Answer 2

对我有用的不是制作二维数组，而是直接放入每个组件中，将依赖项“导入”为数组： @成分（{ ...... 导入：[TableComponent、TableHeaderComponent、TableBodyRowDirective，...等]