Angular 从导出功能创建组件

根据我所知，可以提取组件导出哪些组件的信息。下一步应该是创建一个对象

//our root app component
import {Component, NgModule, Type, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@NgModule({
})
export class FirstModule {}


@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  exports: [FirstModule],
  bootstrap: [ App ]
})
export class AppModule {}

declare let Reflect: any;
function getAnnotations(typeOrFunc: Type<any>): any[]|null {
  // Prefer the direct API.
  if ((<any>typeOrFunc).annotations) {
    let annotations = (<any>typeOrFunc).annotations;
    if (typeof annotations === 'function' && annotations.annotations) {
      annotations = annotations.annotations;
    }
    return annotations;
  }

  // API of tsickle for lowering decorators to properties on the class.
  if ((<any>typeOrFunc).decorators) {
    return convertTsickleDecoratorIntoMetadata((<any>typeOrFunc).decorators);
  }

  // API for metadata created by invoking the decorators.
  if (Reflect && Reflect.getOwnMetadata) {
    return Reflect.getOwnMetadata('annotations', typeOrFunc);
  }
  return null;
}

function convertTsickleDecoratorIntoMetadata(decoratorInvocations: any[]): any[] {
  if (!decoratorInvocations) {
    return [];
  }
  return decoratorInvocations.map(decoratorInvocation => {
    const decoratorType = decoratorInvocation.type;
    const annotationCls = decoratorType.annotationCls;
    const annotationArgs = decoratorInvocation.args ? decoratorInvocation.args : [];
    return new annotationCls(...annotationArgs);
  });
}


const browserAnnotations = getAnnotations(BrowserModule);
const annotations = getAnnotations(AppModule);

console.log(browserAnnotations[0].exports);
console.log(annotations[0].exports);

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，Type，VERSION}
从“@angular/platform browser”导入{BrowserModule}
@NGD模块({
})
导出类FirstModule{}
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}
`,
})
导出类应用程序{
名称：字符串；
构造函数（）{
this.name=`Angular！v${VERSION.full}`
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
导出：[FirstModule]，
引导：[应用程序]
})
导出类AppModule{}
申报并反映：任何；
函数getAnnotations（typeOrFunc:Type）：any[]| null{
//更喜欢直接API。
if（（typeOrFunc）.annotations）{
let annotations=（typeOrFunc）.annotations；
if（注释类型==='function'&&annotations.annotations）{
注解=注解。注解；
}
返回注释；
}
//tsickle的API，用于将修饰符降低到类上的属性。
if（（typeOrFunc）.decorators）{
返回ConvertSickleDecoratorIntoMetadata（（typeOrFunc）.decorators）；
}
//通过调用decorators创建的元数据的API。
if（Reflect&&Reflect.getownmatadata）{
返回Reflect.getownmata（'annotations'，typeOrFunc）；
}
返回null；
}
函数转换器SickleDecoratorIntoMetadata（decoratorInvocations:any[]）：any[]{
如果（！decoratorInvocations）{
返回[]；
}
返回decoratorInvocation.map（decoratorInvocation=>{
const decoratorType=decoratorInvocation.type；
const annotationCls=decoratorType.annotationCls；
const annotationArgs=decoratorInvocation.args？decoratorInvocation.args:[]；
返回新的annotationCls（…annotationArgs）；
});
}
const browserAnnotations=getAnnotations（BrowserModule）；
const annotations=getAnnotations（AppModule）；
console.log（browserAnnotations[0]。导出）；
console.log（注释[0]。导出）；

结果是一个与组件同名的函数。

---

但是，如何才能创建一个工作组件来使用它，例如在应用程序的路由中？

您想解决什么问题？我想要一个所有可用组件的列表并使用它们