1

在 AMP 中，我想根据用户选择动态更改链接参数。例如，如果用户选择选项 1 ，我需要附加一个带有 option=1 的参数。这种实现是可能的还是有另一种方法可以做到这一点。我需要附加的原因是我想用这个参数加载 url。使用参数提交的表单不适用于此实现。

<amp-selector layout="container"  on="select: AMP.setState({
    currentSelection: event.targetOption,

  })" class="sample-selector" >
    <amp-img 
    src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg" 
    width="50" height="50" 
    option="neutral" 
    ></amp-img>
    <amp-img 
      src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg" 
      option="good" 
      width="50" height="50" option="good"></amp-img>
  </amp-selector>


  <button>
    <a href="https://mysite/page.jsp?param=234" 
      data-amp-addparams="response=currentSelection"
      >Click Button</a></button>

我想将 currentSelection 中的值作为参数附加。

4

2 回答 2

2

由于无法[href]在 AMP 中绑定到电子邮件并且 URL 替换也不支持，因此实现此目的的一种方法是在您的标记中包含多个链接，并[hidden]根据您的选择通过绑定来显示/隐藏它们：

<amp-selector layout="container"  on="select: AMP.setState({
    currentSelection: event.targetOption,

  })" class="sample-selector" >
    <amp-img 
    src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg" 
    width="50" height="50" 
    option="neutral" 
    ></amp-img>
    <amp-img 
      src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg" 
      option="good" 
      width="50" height="50" option="good"></amp-img>
  </amp-selector>


    <a href="https://mysite/page.jsp?param=neutral" 
      [hidden]="currentSelection != 'neutral'"
      >Click Button</a>

    <a href="https://mysite/page.jsp?param=good" 
      [hidden]="currentSelection != 'good'"
      >Click Button</a>
于 2019-12-24T01:36:11.497 回答
0

变量替换可能会满足您的需要。在 AMP 中，Links() 允许在字符串内部使用变量并替换为相应的实际值。

支持的变量：

  1. CLIENT_ID
  2. QUERY_PARAM（参数）

链接替换需要按使用选择加入作为附加的安全措施，并确认使用变量替换的意图。这是通过指定一个名为 data-amp-replace 的附加属性来完成的，该属性包含一个字符串值，其中包含要替换的所需变量的空格分隔列表。

例子：

<a
  href="https://example.com?abc=QUERY_PARAM(abc)"
  data-amp-replace="CLIENT_ID QUERY_PARAM"
  data-amp-addparams="client_id=CLIENT_ID(bar)&linkid=l123"
  >Go to my site</a
>

您可以在此处查看详细文档。这里有一个参数提交的例子。表单上也允许变量替换。也看看它，看看它是否有帮助。

这个 Github issue中也有一个讨论，它看起来类似于您想要实现的目标。

于 2019-12-22T20:33:12.137 回答