javascript - ¿Cómo cargar HTML dinámico en DIV con componente? Angular5

typescript dynamic

Question

He estado tratando de encontrar la solución a este problema desde hace dos días. Lamentablemente, no puedo conseguir lo que quiero. Estoy usando Angular5.

<div class="form-group col-md-12" [innerHTML]="GetItemsOfHolder(item.children[1],1,
''UserConfigGroupsLabelHolder'') | keepHtml"></div>

Así es como se ve mi función:

GetItemsOfHolder(item: any,divName:string, recursive: boolean = false,typeName:string="") 
{
return html;
}

Todo funciona bien, a menos que el html que estoy devolviendo contenga un paquete llamado Select2 Esto es lo que utilizo para agregar el html a este div. Funciona muy bien. Hasta quise agregar el paquete dinámico.

Lo que quiero decir es que devolver html contiene el componente del paquete como este:

itemhtml +="<select2 data-type=''"+holderItem.itemType+"'' 
[data]=''this.dropdownData."+holderItem.name+"''></select2>"  

Esto solo devuelve el texto sin formato al navegador y no funciona como se esperaba.

Lo que quiero es que la cadena se convierta en componente o de cualquier otra forma que funcione y genere el menú desplegable select2.

He estado tratando de buscar tantas cosas. Pero no funciona. Esto es bueno, pero no puedo entender esto. Y la carga dinámica de componentes está obsoleta.

¿Puede alguien darme una idea? ¿Cómo puedo resolver este problema? Cualquier ejemplo sería genial.

Answer 1

Puedes cargar todos los que quieras en un div, debes jugar con ng-template y ng-content.

Primero tienes que crear una directiva:

import {Directive, ViewContainerRef} from ''@angular/core'';

@Directive({
  selector: ''[dynamic]'',
  exportAs: ''dynamicdirective''
})
export class DynamicDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Después tienes que ponerlo en alguna plantilla ng como:

<p>
  page works!
</p>


<ng-template #sider=dynamicdirective dynamic></ng-template>

y usalo como

import {Component, ComponentFactoryResolver, OnInit, ViewChild} from ''@angular/core'';


@Component({
  selector: ''app-page'',
  templateUrl: ''./page.component.html'',
  styleUrls: [''./page.component.css'']
})
export class PageComponent implements OnInit {

  @ViewChild(''sider'')
  sider;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
    
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SomeComponent);
 this.sider.viewContainerRef.createComponent(componentFactory);
    });
   
  }

}

y normalmente verá su componente cargado en el lugar de su plantilla ng (puede llamar a https://angular.io/api/core/ViewContainerRef#clear si desea restablecer su vista)

Ya juego con esto, puedes encontrar algo de código aquí https://github.com/nicearma/dynamic

Answer 2

Según lo comentado por @Devcon

Angular desinfectará prácticamente todo, por lo que está obteniendo texto sin formato. Lo que quieres mirar es ReflectiveInjector y principalmente ComponentFactoryResolver. La idea principal es que los componentes necesitan otra información (servicios, otros componentes, etc.) para ser procesados, por lo que utiliza el Inyector para obtener referencias de Inyección de Dependencia y luego la fábrica de Componentes construye su componente. A continuación, inserte esto en una referencia de ViewChild. Hay una manera más complicada de hacer componentes dinámicamente que usa el compilador y requiere un ModuleWithComponentFactories, esto es lo que angular realmente usa.

Y buscando en el angular, acepto que el angular no debe hacerse de esta manera.

Como tengo que crear la página totalmente dinámica que se debe representar en html. Cambié un poco mi json y ngswitch ng-container y ng-template y ngswitch Hice una llamada recursiva en la plantilla y encontré que estaba funcionando muy bien.

Obtengo muchas ventajas al usar esto: el HTML (se renderizo dinámicamente) está en HTML, el código es limpio y legible, fácilmente realizable.

El ejemplo dado aquí es prácticamente el mismo que he hecho. https://.com/a/40530244/2630817

Un pequeño ejemplo es aquí:

<ng-template #itemsList let-itemsList>
  <div *ngFor="let item of itemsList;let i = index">
    <div [ngSwitch]="item.itemType">
        <div class="form-group" *ngSwitchCase="''TEXT''">
            <label>
                {{item.label}}
              </label>
              <input id="{{item.name}}" value="{{item.value}}" type=''text'' class=''form-control txtbox ui-autocomplete-input''/>
        </div>
        <div class="form-group" *ngSwitchCase="''PASSWORD''">
            <label>
                {{item.label}}
              </label>
              <input id="{{item.name}}" value="{{item.value}}" type=''password'' class=''form-control txtbox ui-autocomplete-input''/>
        </div>
        <div class="form-group" *ngSwitchCase="''BOOLEAN''">
            <label style=''width:40%''>{{item.label}}</label>
            <div class="form-group"><input id="{{item.name}}" type=''checkbox'' /></div>

        </div>
        <div  class="form-group" *ngSwitchCase="''LABEL''">
            <label class="form-control">{{item.label}}</label>
        </div>
        <div class="form-group"  *ngSwitchDefault>
            <label>
                {{item.label}}
              </label>
              <select2 class="form-control"  [data]="GetDropDowndata(item.holderId)" [cssImport]="false" [width]="300" [options]="GetOptions(item.type)"></select2>
          </div>
    </div>
  </div>