webentwicklung-frage-antwort-db.com.de

Angular2, Vorlage aus String innerhalb einer Komponente auswerten

Es ist möglich, die Vorlage aus einem String in einer Variablen auszuwerten. Ich muss die Zeichenfolge in der Komponente anstelle des Ausdrucks Platzieren, 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 etwas wie {{ template_string | eval }} oder etwas anderes, um den Inhalt der Variablen im aktuellen Kontext auszuwerten.

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: 

Winkelversion: 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>`;
}

Verwendungszweck:

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

Erwartet: Produktname USD3.00

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

javascriptangularangular-template
6
rafrsr

Sie können eine eigene Direktive erstellen, die dies ausführt:

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;
  }
}

Verwendungszweck:

@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-Beispiel

Siehe auch

15
yurzui

sie sind sich nicht sicher, wie Sie die Vorlagenzeichenfolge erstellen

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 jedoch dennoch etwas wie ngIf empfehlen, um dynamische Vorlagen zu steuern.

0
tesgo

In Angular werden doppelt geschweifte Klammern {{}} verwendet, um einen Ausdruck in der Vorlage einer Komponente auszuwerten. und nicht mit zufälligen Zeichenfolgen oder dynamisch hinzugefügten DOM-Elementen arbeiten. Eine Möglichkeit, dies zu tun, ist die Verwendung der TypeScript-String-Interpolation mit ${}. Überprüfen Sie den Rest des Codes, um dies zu verstehen

@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>`;
}
0
Khurram