change - ng-content select angular 6

Cargue dinámicamente la plantilla HTML en angular2

Question

He creado un proyecto usando angular-cli que contiene AppComponent de la siguiente manera:

import { Component } from ''@angular/core'';
@Component({
  selector: ''app-root'',
  templateUrl: ''./app.component.html'',
  styleUrls: [''./app.component.css'']
})
export class AppComponent {
  title = ''app works!'';
}

Y app.component.html como

<h1>
  Good Morning, {{title}}
</h1>

Entonces, cuando lo compilo con ng build , genera algunos archivos como este ./dist/main.bundle.js que contienen algo de código de la siguiente manera:

/* 586 */
/***/ function(module, exports) {

module.exports = "<h1>/n  Good Morning, {{title}}/n</h1>/n"

/***/ },
/* 587 */

Eso significa que, en el momento de la compilación, el compilador / paquete está leyendo el archivo html y concatenándolos en el archivo js generado.

Pero en mi caso, el html también es dinámico y depende del contenido del lado del servidor. Digamos que, en lugar de html, mi archivo de plantilla es app.component.jsp y reside en un servidor o carpeta completamente diferente.

Además, ese archivo JSP a veces devuelve <h1>Good Morning, {{title}}</h1> y, a veces, <h1>Good Afternoon, {{title}}</h1> dependiendo de la hora actual del servidor.

¿Cómo lograr esta funcionalidad?

Lo que entiendo es que necesito definir algún tipo de función de cargador, por ejemplo: loadDynamicTemplate(template_url)

y necesita usar esa función de cargador en la propiedad de plantilla de decorador de componentes. En ese caso, cuando se genera main.bundle.JS, también usará esa función. Entonces, en tiempo de ejecución angular llamará a esta función y cargará el HTML por ajax y lo usará.

Actualización 1

Here encontré alguna diferencia entre SystemJS y Webpack. También descubrí que podemos cargar los archivos HTML en tiempo de ejecución si podemos usar SystemJS. Así que creo que este problema se puede resolver con la configuración de SystemJS. Pero para eso entra en juego otro problema, aunque creo que podría ser una pregunta separada. Así que publiqué una nueva pregunta para resolverlo here .

Probablemente si esa pregunta se resuelve, intentaré con SystemJS y luego publicaré la solución aquí si me ayuda.

Answer 1

¿Por qué no tener toda la plantilla en un archivo y mostrarla de acuerdo con la condición? Al igual que su ./app.component.html se verá así:

<div *ngIf="isWorld" >
  <h1>  Hello World </h1>
</div>
<div *ngIf="isUniverse" >
  <h1>  Hello Universe </h1>
</div>

¿Alguna idea sobre su efecto en el tiempo de construcción / tamaño?

Answer 2

Para interpolar una plantilla con Good Morning, {{title}} , puede usar el componente "ng-dynamic" de Suguru Inatomi.

Primero tienes que instalarlo:

npm install --save ng-dynamic

Luego importe a su NgModule:

@NgModule({
  imports: [
    ...
    DynamicComponentModule.forRoot({}),
    ...
  ],
  ...
})
export class AppModule {}    

Finalmente úsalo así:

@Component({
  selector: ''app-root'',
  template: ''<div *dynamicComponent="template; context: bindings;"></div>''
})
export class AppComponent {
  bindings: any = {title: "Chuck Norris"};
  template: string = `
    <h1>Good Morning, {{title}}</h1>
  `;
  constructor(http: Http) {
    http.get("/path-to-your-jsp").map((html:string) => this.template = html); //<- You may set bindings in request headers...
  }
}

Puede usar componentes en su plantilla definiendo un SharedModule. Agregué un "my-button" personalizado con éxito como en el ejemplo de documentación aquí: github.com/laco0416/ng-dynamic

Answer 3

Parece que la forma de hacerlo ahora es establecer el tipo de respuesta cuando realiza su solicitud. HttpClient-Requesting non-JSON data `

@Component({
  selector: ''my-template'',
  template: ''<div [innerHtml]="myTemplate"></div>''
})
export public class MyTemplate {
  private myTemplate: any = "";
  @Input() url: string;
  constructor(http: Http) {
    http.get("/path-to-your-jsp", { responseType: ''text'' })
      .subscribe(
        (data: string) => {
          this.myTemplate = html;
        }
      );
  }
}

``

Answer 4

Puede usar [innerHtml] en un componente my-template con algo como esto (no probé):

@Component({
    selector: ''my-template'',
    template: `
<div [innerHtml]="myTemplate">
</div>
`})
export public class MyTemplate {
    private myTemplate: any = "";
    @Input() url: string;
    constructor(http: Http) {
        http.get("/path-to-your-jsp").map((html:any) => this.myTemplate = html);
    }
}

Answer 5

trabajado con angular 6

import { Component, Input } from ''@angular/core'';
import { HttpClient } from ''@angular/common/http'';

@Component({
  selector: ''app-root'',
  template: `
            <div [innerHtml]="myTemplate">
            </div>
          `,
  styleUrls: [''./app.component.css'']
})
export class AppComponent {
  private myTemplate: any = '''';
  constructor(http: HttpClient) {
    http.get(''/service-path'', {responseType: ''text''}).subscribe(data => this.myTemplate = data);
  }
}