Angular2 使用字符串插值的动态 Facebook 分享按钮 - 错误

Question

我正在尝试使用 facebook 的 javascript sdk 在我的 Angular 应用程序上制作一个动态分享按钮。每个页面都有一个唯一的查询字符串，我将其附加到组件中的 URL，但是当我尝试使用字符串插值将其放入 data-href 时，我收到此错误：

  <div style="position: absolute; right:5px;" class="fb-share-button" data-href="{{eventUrl}}" data-layout="button" data-size="large" data-mobile-iframe="true">
      <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fmyurl.com%2F&amp;src=sdkpreparse">
        Share
      </a>
    </div>

未处理的 Promise 拒绝：模板解析错误：无法绑定到 'href' 因为它不是 'div' 的已知属性。 ("

<div style="position: absolute; right:5px;" class="fb-share-button" [ERROR ->]data-href="{{eventUrl}}"

data-layout="button" data-size="large" data-mobile-iframe="true"> ;任务：Promise.then；值：SyntaxError 错误：模板解析错误：无法绑定到 'href' 因为它不是 'div' 的已知属性。 ("

<div style="position: absolute; right:5px;" class="fb-share-button" [ERROR ->]data-href="{{eventUrl}}"

data-layout="button" data-size="large" data-mobile-iframe="true">

Answer 1

将 data-href="{{eventUrl}}" 更改为 [attr.data-href]="eventUrl" 应该可以解决您的问题。

之后，您可能会遇到here 解释的问题，所以请看一下。