Angular2, Vorlage aus String in einer Komponente auswerten

Question

Es ist möglich, Vorlage aus String in einer Variablen zu bewerten. Ich muss die Zeichenfolge in die Komponente anstelle des Ausdrucks z.

template: "<div>{{ template_string }}</div>"

template_string enthält: <b>{{ name }}</b>

und alle sollten zu <div><b>My Name</b></div>

ausgewertet werden, aber ich sehe <div>{{ template_string }}</div>

Ich brauche so etwas wie {{ template_string | eval }} oder etwas anderes, den Inhalt zu bewerten der Variablen im aktuellen Kontext.

Es ist möglich? Ich brauche etwas, um diesen Ansatz zu verwenden, da template_string geändert werden kann, wenn die Komponente verwendet wird.

Edit1:

Angular Version: 4.0.3

Z.B.

@Component({ 
    selector: 'product-item', 
    template: ` 
    <div class="product">{{ template }}</div>`, 
}) 
export class ProductItemComponent { 
    @Input() name: string; 
    @Input() price: number = 0; 
    @Input() template: string = `{{ name }} <b>{{ price | currency }}</b>`; 
} 

Verbrauch:

<product-item [name]="product.name" [price]="product.price"></product-item> 

Erwartet: Produktname USD3.00

Ausgang:{{ name }} <b>{{ price | currency }}</b>

Answer 1

Sie können Ihre eigene Richtlinie erstellen, um zu verstehen, die es tun:

compile.directive. ts

@Directive({ 
    selector: '[compile]' 
}) 
export class CompileDirective implements OnChanges { 
    @Input() compile: string; 
    @Input() compileContext: any; 

    compRef: ComponentRef<any>; 

    constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {} 

    ngOnChanges() { 
    if(!this.compile) { 
     if(this.compRef) { 
     this.updateProperties(); 
     return; 
     } 
     throw Error('You forgot to provide template'); 
    } 

    this.vcRef.clear(); 
    this.compRef = null; 

    const component = this.createDynamicComponent(this.compile); 
    const module = this.createDynamicModule(component); 
    this.compiler.compileModuleAndAllComponentsAsync(module) 
     .then((moduleWithFactories: ModuleWithComponentFactories<any>) => { 
     let compFactory = moduleWithFactories.componentFactories.find(x => x.componentType === component); 

     this.compRef = this.vcRef.createComponent(compFactory); 
     this.updateProperties(); 
     }) 
     .catch(error => { 
     console.log(error); 
     }); 
    } 

    updateProperties() { 
    for(var prop in this.compileContext) { 
     this.compRef.instance[prop] = this.compileContext[prop]; 
    } 
    } 

    private createDynamicComponent (template:string) { 
    @Component({ 
     selector: 'custom-dynamic-component', 
     template: template, 
    }) 
    class CustomDynamicComponent {} 
    return CustomDynamicComponent; 
    } 

    private createDynamicModule (component: Type<any>) { 
    @NgModule({ 
     // You might need other modules, providers, etc... 
     // Note that whatever components you want to be able 
     // to render dynamically must be known to this module 
     imports: [CommonModule], 
     declarations: [component] 
    }) 
    class DynamicModule {} 
    return DynamicModule; 
    } 
} 

Verbrauch:

@Component({ 
    selector: 'product-item', 
    template: ` 
    <div class="product"> 
     <ng-container *compile="template; context: this"></ng-container> 
    </div> 
    `, 
}) 
export class ProductItemComponent { 
    @Input() name: string; 
    @Input() price: number = 0; 
    @Input() template: string = `{{ name }} <b>{{ price | currency }}</b>`; 
} 

Plunker Example

Siehe auch

• Angular 2.1.0 create child component on the fly, dynamically

Answer 2

nicht sicher, wie Sie die Vorlage Zeichenfolge Gebäude sind

import { ..., OnInit } from '@angular/core'; 

@Component({ 
    selector: 'product-item', 
    template: ` 
    <div class="product" [innerHtml]='template_string'> 
    </div>`, 
    }) 
export class ProductItemComponent implements OnInit { 
    @Input() name: string; 
    @Input() price: number = 0; 
    @Input() pre: string; 
    @Input() mid: string; 
    @Input() post: string; 
    template_string; 
    ngOnInit() { 
     // this is probably what you want 
     this.template_string = `${this.pre}${this.name}${this.mid}${this.price}${this.post}` 
    } 
} 

<product-item [name]="name" [price]="price" pre="<em>" mid="</em><b>" post="</b>"></product-item> 

Die Zeichenfolge kann von außerhalb der Komponente erstellt werden, würde aber immer noch etwas wie ngIf empfehlen, um dynamische Vorlagen zu steuern.

Answer 3

In eckigen geschweiften Klammern {{}} werden verwendet, um einen Ausdruck in einer Komponentenvorlage auszuwerten. und nicht mit zufälligen Strings oder dynamisch hinzugefügten DOM-Elementen arbeiten. Eine Möglichkeit besteht darin, die Typoskript-String-Interpolation mit ${} zu verwenden. Überprüfen Sie die restliche Code

@Component({ 
    selector: 'product-item', 
    template: ` 
    <div class="product" [innerHTML]="template"></div>`, 
}) 
export class ProductItemComponent { 
    @Input() name: string; 
    @Input() price: number = 0; 
    @Input() template: string = `${ this.name } <b>${ this.price }}</b>`; 
}