angular4 把普通的html模板转变为可编辑的angular4模板

Question

我从接口拿到的数据是一个普通的html模板（带样式），现在我用angular4开发的项目，我想把这段html显示到界面上，然后用户可以编辑这段html的一些内容，假如从接口的数据如下：

<div class="container">
    <div class="thumbnail" style="width:100px;height:200px">
        <img src="../xxx/xxx.png" alt="" style="width:100%">
    </div>
    <h1 class=title>大宝五折起</h1>
    <p class="desc">双11大促销</p>
    <div class="tag">
        <span>双11</span>
        <span>促销</span>
        <span>五折</span>
    </div>
</div>

现在我要把这段html显示到页面的工具栏，当用户点击这个html的时候，这段html模板就会被复制到编辑区域，并且变的可编辑（angular4模板）

<div class="container">
    <div class="thumbnail" style="width:100px;height:200px">
        <img src="../xxx/xxx.png" alt="" style="width:100%">
    </div>
    <h1 class=title>{{title}}</h1>
    <p class="desc">{{desc}}</p>
    <div class="tag">
        <ng-container *ngFor="let tag of tags">
            <span>tag.name</span>
        <ng-container/>
    </div>
</div>

这样用户编辑相应的字段名字，编辑区的文本内容也会随着改变。不知道我描述清楚没有，求各位大神提供下思路。

上一个大致的图：点击工具栏模板，预览区会出现同样一个模板，在编辑区编辑模板的属性，预览区会跟着变化

Answer 1

参考https://github.com/KhaledSMQ/...