如何使用amp-bind组件将json结果中的html内容填充到div

Question

我尝试过以下几种方法

Json结果

{
 "details":"<h1>Heading</h1><p>Description</p>"
}

<amp-state id="remoteData" src="/api/get-result" >
</amp-state>

<div [text]="remoteData.details"></div>

现在它显示如下所示

<div [text]="remoteData.details"><h1>Heading</h1><p>Description</p></div>

html标签是作为api call.Is的json结果列出的，有任何方法可以实现这一点。

我也尝试过使用amp-iframe加载它。在服务器上创建了一个额外的页面，并使用iframe调用相同的页面。内容加载正确，但我无法根据内容高度调整div的大小，因为两个来源是相同的。

<amp-iframe width="200" id="myframe" height="40" layout="responsive" resizable sandbox="allow-scripts " frameborder="0"                                         src="https://demo.com/api/get-html"></amp-iframe>

用于动态设置父amp-iframe组件高度的脚本

<script>
window.parent.postMessage({
    sentinel: 'amp',
    type: 'embed-size',
    height: document.body.scrollHeight
}, '*');
</script>

使用amp-bind我无法显示html内容，使用amp-iframe我无法根据content.Can调整iframe高度请任何人帮助。

谢谢

Answer 1

您可以使用amp-list / mustache模板来实现这一点。但是，您仍然受到特定高度的限制。而且你不能注入任意的html。最好在服务器端呈现内容。

如果你这样格式化你的json：

{
    "items" : [ { 
        "heading":"Heading",
        "description":"Description",
        "listItems": ["one", "two", "three"]
    } ]
}

小胡子模板。

<amp-list width="auto" height="50" src="https://myserver/stuff/remoteData.json" max-items="1">
    <template type="amp-mustache">
        <h1>{{heading}}</h1>
        <p>{{{description}}}</p>
        {{#listItems}}
            <li>{{.}}</li>
        {{/listItems}}
    </template>
</amp-list>