Angular 带额外组件/指令声明的角度常春藤中的renderComponent

以下是在ivy中渲染动态惰性组件的示例：

import { ɵrenderComponent as renderComponent, Injector } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-lazy></app-lazy>
  `
})
export class AppComponent {
  constructor(injector: Injector) {
    import('./lazy.component').then(({ LazyComponent }) => {
      renderComponent(LazyComponent, {
        injector,
        host: 'app-lazy'
      });
    });
  }
}

从'@angular/core'导入{ɵrenderComponent作为renderComponent，Injector}；
@组成部分({
选择器：'应用程序根'，
模板：`
`
})
导出类AppComponent{
建造师（注入器：注入器）{
导入（'./lazy.component'）。然后（{LazyComponent}）=>{
渲染组件（懒散组件{
注射器，
主持人：“应用程序懒惰”
});
});
}
}

如果我们需要在

lazy.component

中使用额外的组件/指令，我该怎么办？

您需要一个自定义装饰器

导入{
组成部分
类型
ɵComponentDef作为ComponentDef，
ɵDirectiveDef作为DirectiveDef，
ɵPipeDef作为PipeDef
}从“@angular/core”开始；
@组件（…）
@组成部门({
指令：[……]，/***您需要的额外组件/指令***
管道：[……]/***额外管道，如：JsonPipe***
})
导出类懒散组件{
...
}
导出接口组件depsconfig{
指令？：类型[]；
管道？：类型[]；
}
函数getDirectiveDef（t:Type）：DirectiveDef{
if（t['ɵdir']）{
返回t['ɵdir']作为DirectiveDef；
}
if（t['ɵcmp']）{
返回t['ɵcmp']作为组件def；
}
抛出新错误（'未找到'+t.name'的角度定义）；
}
函数getDirectiveDefs（类型：Type[]）：DirectiveDef[]{
返回类型.map（t=>getDirectiveDef（t））；
}
函数getPipeDef（t:Type）：PipeDef{
if（t['ɵpipe']）{
将t['ɵpipe']作为PipeDef返回；
}
抛出新错误（'未找到'+t.name'的角度定义）；
}
导出函数getPipeDefs（类型：Type[]）：PipeDef[]{
返回类型.map（t=>getPipeDef（t））；
}
导出函数ComponentDeps（配置：ComponentDepsConfig）{
返回（componentType:Type）=>{
常量定义=组件类型['cmp']| |组件类型['ngComponentDef']；
//指令或组件
def.directiveDefs=[
…getDirectiveDefs（config.directives | |[]）
];
//管道
def.pipeDefs=[
…getPipeDefs（config.pipes | |[]））
];
};
}

您需要一个定制的装饰器

导入{
组成部分
类型
ɵComponentDef作为ComponentDef，
ɵDirectiveDef作为DirectiveDef，
ɵPipeDef作为PipeDef
}从“@angular/core”开始；
@组件（…）
@组成部门({
指令：[……]，/***您需要的额外组件/指令***
管道：[……]/***额外管道，如：JsonPipe***
})
导出类懒散组件{
...
}
导出接口组件depsconfig{
指令？：类型[]；
管道？：类型[]；
}
函数getDirectiveDef（t:Type）：DirectiveDef{
if（t['ɵdir']）{
返回t['ɵdir']作为DirectiveDef；
}
if（t['ɵcmp']）{
返回t['ɵcmp']作为组件def；
}
抛出新错误（'未找到'+t.name'的角度定义）；
}
函数getDirectiveDefs（类型：Type[]）：DirectiveDef[]{
返回类型.map（t=>getDirectiveDef（t））；
}
函数getPipeDef（t:Type）：PipeDef{
if（t['ɵpipe']）{
将t['ɵpipe']作为PipeDef返回；
}
抛出新错误（'未找到'+t.name'的角度定义）；
}
导出函数getPipeDefs（类型：Type[]）：PipeDef[]{
返回类型.map（t=>getPipeDef（t））；
}
导出函数ComponentDeps（配置：ComponentDepsConfig）{
返回（componentType:Type）=>{
常量定义=组件类型['cmp']| |组件类型['ngComponentDef']；
//指令或组件
def.directiveDefs=[
…getDirectiveDefs（config.directives | |[]）
];
//管道
def.pipeDefs=[
…getPipeDefs（config.pipes | |[]））
];
};
}

如何设置组件和管道深度？能否在ComponentDepsConfig中添加

组件

和

管道

字段？请参阅。如果我在

AppModule

的

声明中添加
HelloWorldComponent
，它工作得很好。但现在，它无法工作。我支持您的演示，您需要将模式：[CUSTOM\u ELEMENTS\u SCHEMA]添加到app.module.ts以防止模板错误，它工作得非常好，非常感谢。
ɵdir
、
ɵcmp
和
ɵpipe
的文档在哪里？如何设置组件和管道deps？能否在ComponentDepsConfig中添加
组件
和
管道
字段？请参阅。如果我在
AppModule
的
声明中添加
HelloWorldComponent
，它工作得很好。但现在，它无法工作。我支持您的演示，您需要将模式：[CUSTOM\u ELEMENTS\u SCHEMA]添加到app.module.ts以防止模板错误，它工作得非常好，非常感谢。哪里是
ɵdir
、
ɵcmp
和
ɵpipe
的文档？
import {
  Component,
  Type,
  ɵComponentDef as ComponentDef,
  ɵDirectiveDef as DirectiveDef,
  ɵPipeDef as PipeDef
} from '@angular/core';

@Component(...)
@ComponentDeps({
   directives: [...], //***extra component/directive you want***
   pipes: [...] //***extra pipe, like: JsonPipe...***
})
export class LazyComponent{
 ...
}



export interface ComponentDepsConfig {
  directives?: Type<any>[];
  pipes?: Type<any>[];
}
function getDirectiveDef<T>(t: Type<T>): DirectiveDef<T> {
  if (t['ɵdir']) {
    return t['ɵdir'] as DirectiveDef<T>;
  }
  if (t['ɵcmp']) {
    return t['ɵcmp'] as ComponentDef<T>;
  }
  throw new Error('No Angular definition found for ' + t.name);
}
function getDirectiveDefs(types: Type<any>[]): DirectiveDef<any>[] {
  return types.map(t => getDirectiveDef(t));
}

function getPipeDef<T>(t: Type<T>): PipeDef<T> {
  if (t['ɵpipe']) {
    return t['ɵpipe'] as PipeDef<T>;
  }
  throw new Error('No Angular definition found for ' + t.name);
}

export function getPipeDefs(types: Type<any>[]): PipeDef<any>[] {
  return types.map(t => getPipeDef(t));
}
export function ComponentDeps(config: ComponentDepsConfig) {
  return (componentType: Type<any>) => {
    const def = componentType['ɵcmp'] || componentType['ngComponentDef'];
    // directives or components
    def.directiveDefs = [
      ...getDirectiveDefs(config.directives || [])
    ];
    // pipes
    def.pipeDefs = [
      ...getPipeDefs(config.pipes || [])
    ];
  };
}