javascript - Angular 5 - 在 Angular 应用程序中使用 altmetric 徽章会出现 Uncaught Error : Template parse errors

Question

我正在尝试使用Altmetric Badge根据 https://api.altmetric.com/embeds.html 中的文档在我的应用程序中

在我的组件中，我以这种方式包含了脚本( Angular 删除 <script tags> )，所以这是一个黑客:

 @Input() doi;

    constructor(private renderer2: Renderer2,
                   @Inject(DOCUMENT) private _document) {
    } 

    public ngOnInit() {
        const s = this.renderer2.createElement('script');
        s.type = 'text/javascript';
        s.src = 'https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js';
        this.renderer2.appendChild(this._document.body, s);
    }

我收到doi作为输入。

我的html是:

 <div class="altmetric-embed" data-badge-type="donut" data-doi="{{doi}}"></div>

这也不起作用:

<div class="altmetric-embed" data-badge-type="donut" [data-doi]="doi"></div>

但我收到以下错误:

Uncaught Error: Template parse errors: Can't bind to 'doi' since it isn't a known property of 'div'. ("etricCancel($event)">--> ]data-doi="{{doi}}">

如何让它与我的输入一起工作？

Answer 1

使用属性绑定(bind)而不是插值

<div class="altmetric-embed" data-badge-type="donut" [attr.data-doi]="doi"></div>