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

我从接口拿到的数据是一个普通的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>

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

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

阅读 3.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题