pasar - compilación de plantilla dinámica recursiva en angular2

pasar parametros entre componentes angular 4

Question

He basado parte de mi trabajo en el mismo problema descrito aquí:

plantilla dinámica para compilar componente dinámico con angular 2.0

¿Cómo puedo usar / crear una plantilla dinámica para compilar componentes dinámicos con Angular 2.0?

El plunker de trabajo descrito en la pregunta anterior se puede encontrar aquí .

El problema surge si el detalle dinámico intenta crear otra vista dinámica que utiliza detalles dinámicos en la plantilla. Si trato de hacer eso obtengo la siguiente excepción .:

''detalles dinámicos'' no es un elemento conocido: 1. Si ''detalles dinámicos'' es un componente angular, entonces verifique que sea parte de este módulo.

Esto se repite fácilmente cambiando la lógica en el plunker para crear una plantilla dinámica que emita " <dynamic-detail></dynamic-detail> ".

En el archivo " app / dynamic / template.builder.ts " he cambiado el siguiente código:

      let editorName = useTextarea 
    ? "text-editor"
    : "string-editor";

A

      let editorName = useTextarea 
    ? "dynamic-detail"
    : "string-editor";

Cuando eso sucede, me encuentro con la excepción anterior. Aparentemente, el compilador no está familiarizado con los detalles dinámicos cuando se hace recursivamente.

Intenté agregar DynamicDetail a las importaciones en los diferentes módulos sin suerte. Quizás eso no sea parte de la solución.

Answer 1

Si cambias "text-editor" por "dynamic-detail" , tu plantilla se verá así:

<form>
  <dynamic-detail
     [propertyName]="''code''"
     [entity]="entity"
   ></dynamic-detail>
   <dynamic-detail
      [propertyName]="''description''"
      [entity]="entity"
   ></dynamic-detail>
</form>

DynamicDetail componente DynamicDetail no tiene propertyName y propiedades de entity . Entonces puedes agregar su.

detail.view.ts

export class DynamicDetail implements AfterViewInit, OnChanges, OnDestroy, OnInit
{ 
    @Input()  public propertyName: string;
    @Input()  public entity: any;

La segunda parte de la solución es agregar este componente a RuntimeComponentModule :

type.builder.ts

protected createComponentModule (componentType: any) {
  @NgModule({
    imports: [ 
      PartsModule,
      DynamicModule.forRoot() // this line
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule {}

  return RuntimeComponentModule;
}

Después de eso debería funcionar el ejemplo de Plunker