Estoy tratando de establecer una URL de plantilla a partir de un valor extraído de un archivo JSON. Ese valor será una URL de donde debe ir Angular para obtener el contenido de la plantilla. Básicamente, estoy tratando de encontrar algún tipo de solución que permita que el usuario configure la plantilla HTML deseada en el backend, y mi servicio Angular realiza la solicitud a S3, que establece templateUrl.
import { Component, OnInit } from '@angular/core'; import { GlobalDirective } from '../../global.directive'; @Component({ selector: 'terms-form', //need to be able to specify this templateUrl as a variable from the JSON sitting on S3. templateUrl: URL value from JSON, styleUrls: ['./terms.component.css'] }) export class TermsFormComponent implements OnInit { constructor(public globalDirective: GlobalDirective) {} ngOnInit() { this.globalDirective.getData();} }
Encontré algunas preguntas similares aquí pero nada que funcionó para mi problema. Estoy usando @angular/cli: 1.0.1
Creo que no puedes hacerlo, pero siempre puedes inyectar una plantilla.
@Component({ selector: 'my-cmp', template: ` <ng-container [ngTemplateOutlet]="template" [ngOutletContext]="{name: name}"></ng-container> `, }) export class MyCmp { @Input() template: TemplateRef<any>; @Input() name: string; constructor() { } } @Component({ selector: 'my-app', template: ` <my-cmp [template]="one" [name]="'julia'"></my-cmp> <my-cmp [template]="two" [name]="'kate'"></my-cmp> <ng-template #one><div>here is a template one {{name}}</div></ng-template> <ng-template #two><div>here is a template two {{name}}</div></ng-template> `, }) export class App { @ViewChild('one', { read: TemplateRef }) one: TemplateRef<any>; @ViewChild('two', { read: TemplateRef }) two: TemplateRef<any>; constructor() { } }Oye, ha pasado un tiempo, pero prueba esto: en mi caso, estoy usando mi archivo de entorno para entregar dependencias
//This is the only way to use resource files dependency injection (expect for using template): //encapsulating the environment variable in another variable prevents it from being undefined inside @component //using "" + the variable prevents Error: Cannot find module "." at webpackMissingModule var tmp = environment; @Component({ selector: 'my-selector', templateUrl: "" + tmp.html, styleUrls: ["" + tmp.css] })En mi caso, quería usar dos plantillas html diferentes con marcos css diferentes. Bulma y Bootstrap. Solo con fines de prueba. Cambié las plantillas según la variable de entorno.
En archivo de medio ambiente
export const environment = { useBulma: true };y en componente
import { environment } from 'src/environments/environment'; @Component({ selector: 'app-test', templateUrl: environment.useBulma ? './with-bulma.component.html' : './with-bootstrap.component.html', styleUrls: ['./value.component.css'] })