角2 - 変数からtemplateUrlを設定しますか？

Question

JSONファイルから取得した値からテンプレートURLを設定しようとしています。この値は、テンプレートコンテンツを取得するためにAngularが取得するURLのURLになります。基本的に私は希望HTMLテンプレートは、バックエンドでユーザーが設定することを可能にするソリューションのいくつかの並べ替えを思い付くしようとしていますし、私の角度サービスが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(); 

}を設定しS3に要求を行います }

私はここでいくつかの同様の質問が見つかりましたが、私の問題のために働いたものはありません。私は使用しています@angular/cli: 1.0.1

Answer 1

私はあなたがそれをすることはできないと思うが、あなたはいつもテンプレートを注入することができます。

@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

ちょっとそれはしばらくしてこの試すます：https://angular.io/docs/：依存関係

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