0

我试过以下

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标签被列为文本。实际上json结果来自api调用。有没有办法实现这一点。

我也尝试使用 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 我无法根据内容调整 iframe 高度。谁能帮忙。

谢谢

4

1 回答 1

0

您可以使用 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>
于 2017-10-27T05:25:56.453 回答