Angulaire2. Comment imprimer une balise HTML dans un template, qui vient du paramètre @Input()?

Question

L'idée:

<h2 *ngIf="tag == 'h2'"></h2> 
<h3 *ngIf="tag == 'h3'"></h3> 
<p *ngIf="tag == 'p'"></p> 

Je veux obtenir le tag dynamique, en fonction de la valeur de la propriété de l'étiquette. Le tag est un paramètre Input()

PS: Je l'ai essayé de le faire: <{{tag}></{{tag}}>, mais il donne et l'erreur et ne fonctionne pas

<div (mouseenter)="setEditMode()" [innerHTML]="result | safeHtml" *ngIf="!editMode"></div> 
<div (mouseleave)="setViewModeIfNotFocused()" *ngIf="editMode"> 
    <input type="text" [(ngModel)]="content" #inputEl> 
</div> 

-

import { Component, Input, OnInit, ViewChild } from '@angular/core'; 
@Component({ 
    selector: 'ui-edit-field', 
    templateUrl: 'edit-field.component.html' 
}) 
export class UiEditFieldComponent implements OnInit { 

    @ViewChild('inputEl') 
    public inputEl: any; 

    @Input('tag') 
    public tag: string; 

    @Input('classes') 
    public classes: string; 

    @Input('content') 
    public content: string; 

    public result: string; 

    public editMode = false; 

    constructor() { 
    } 

    ngOnInit() { 
     this.result = '<' + this.tag + ' class="' + this.classes + '">' + this.content + '</' + this.tag + '>'; 
    } 

    setEditMode() { 
     this.editMode = true; 
    } 

    setViewModeIfNotFocused() { 
     if (true) { 
      this.editMode = false; 
     } 
    } 
} 

Answer 1

Vous pouvez utiliser

<div [outerHTML]="tag"></div> 

mais tag doit contenir le <...>, car ils ne peuvent pas être ajoutés dans le modèle.

Si tag est supposé devenir un composant angulaire, alors vous avez besoin d'une approche différente. L'approche ci-dessus permet seulement d'ajouter du HTML sans aucune fonctionnalité angulaire.

Voir aussi https://stackoverflow.com/a/41089093/217408

mise à jour

_content:string; 
@Input('content') 
public set content(val:string) : void { this._content = val; updateContent();} 

ngOnInit() { 
    this._updateContent(); 
} 

_updateContent() { 
    this.result = '<' + this.tag + ' class="' + this.classes + '">' + this._content + '</' + this.tag + '>'; 
} 

Answer 2

Vous pouvez y parvenir si vous écrivez tout le contenu en tant que chaîne dans votre file.ts

<div [innerHtml]="YourHtmlString"></div> 

et

this.YourHtmlString = `<${yourInput}>whatEver</${yourInput}>` 

https://angular.io/guide/template-syntax#property-binding-or-interpolation