如何在 Angular 13 中列出其他模块的组件？

Question

我在项目中创建了一个简单模块，其中包含一个要测试的组件。

import { NgModule } from '@angular/core';
import {ButtonComponent} from "@modules/basic-components/components/button/button.component";

@NgModule({
  imports: [],
  declarations: [ButtonComponent],
  providers: [],
})
export class BasicComponentsModule {}

在其他模块的组件中，我想列出我的 BasicComponentsModule 的组件。 我正在尝试像这样加载模块：

const module = await import('@modules/basic-components/basic-components.module');

当我记录模块时，我在 Chrome 开发工具中看到它拥有我需要的所有内容：

但是我如何从代码中模块声明呢？我还需要获取每个组件的输入列表。

Answer 1

您的方法是正确的，但当您尝试从模块中提取输入时，情况会有点复杂。

首先你需要获得对

BasicComponentsModule

的引用，你已经有了第一个部分：

const module = await import('@modules/basic-components/basic-components.module').BasicComponentsModule;

接下来，使用

Reflect

:

提取元数据和声明

const moduleMetadata = Reflect.getOwnMetadata('annotations', BasicComponentsModule) as NgModule[];
  const declarations = moduleMetadata[0].declarations;

接下来，您可以使用函数根据声明获取输入：

function getComponentInputs(component: Type<any>): string[] {
    const inputs: string[] = [];
    const componentMetadata = Reflect.getOwnMetadata('annotations', component) as Component[];
    if (componentMetadata && componentMetadata.length > 0) {
      const componentInputs = componentMetadata[0].inputs || [];
      for (const input of componentInputs) {
        inputs.push(input.propName || input);
      }
    }
    return inputs;
  }

使用您之前提取的声明：

for (const declaration of declarations) {
    if (declaration instanceof Function) { // Check if it's a class (component, directive, or pipe)
      const inputs = getComponentInputs(declaration);
      console.log(`Component: ${declaration.name}, Inputs: ${inputs.join(', ')}`);
    }
  }