Question

这个想法：

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

我希望tag是动态的，具体取决于标记属性值。 tag是Input()参数

P.S。：我试图这样做： <{{tag}></{{tag}}>，但是它给出了错误并且无法正常工作

<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

您可以使用

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

但tag需要包含<...>，因为它们无法添加到模板中。

如果tag应该成为Angular组件，那么您需要一种不同的方法。上述方法仅允许添加没有任何Angular功能的HTML。

另见https://stackoverflow.com/a/41089093/217408

<强>更新

_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

如果您将所有内容作为字符串写入file.ts

，则可以实现此目的

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

和

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

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

Angular2。如何在模板中打印HTML标签，来自@Input（）参数？

2 个答案: