Angular 2 - Einstellung TemplateUrl aus einer Variablen?

Question

Ich versuche, eine Vorlage-URL aus einem Wert festzulegen, der aus einer JSON-Datei abgerufen wird. Dieser Wert ist eine URL, von der Angular den Vorlageninhalt abrufen soll. Grundsätzlich versuche ich, mit irgendeiner Art von Lösung zu entwickeln, die die gewünschte HTML-Vorlage kann durch den Benutzer auf dem Back-End, und mein Eckige Service macht die Anforderung an S3, das setzt die 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(); 

eingestellt werden} }

Ich fand einige ähnliche Fragen hier, aber nichts, das für mein Problem funktionierte. Ich verwende @angular/cli: 1.0.1

Answer 1

Ich denke, Sie können es nicht tun, aber Sie können immer eine Vorlage injizieren.

@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() { 
    } 
} 

Answer 2

Hey es ist eine Weile her, aber versuchen, diese: in meinem Fall im meinem Umfeld Datei mit Abhängigkeiten liefern

//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] 
})