如何从Angular 2及更高版本中的变量动态传递twitter data-widget-id

Question

我想在我的角度应用程序中嵌入twitter小部件，然而，当我从变量twitter组件传递小部件ID时，twitter中所需的data-widget-id存储在数据库中如果我传递小部件ID则不会呈现硬编码字符串然后twitter小部件成功加载

<!-- Works -->
<a  class="twitter-timeline" data-widget-id="973470934035202049"></a>

<!-- Does not work -->
<a  class="twitter-timeline" attr.data-widget-id="{{twitterWigetId}}"></a>

这是和示例 https://stackblitz.com/edit/angular-xxavf8?file=app%2Fapp.component.html

Answer 1

您的代码有两个问题。您在标记中使用twitterWigetId，但您定义的属性为witterWigetId。另外，将其从string

更改为number

我还建议您在类的顶部定义twttr，以便IDE不会出错。

declare var twttr: any;

查看以下代码

import { Component , AfterViewInit , ViewChild } from '@angular/core';

declare var twttr: any;

@Component({
  selector: 'my-app',
  template: ' <a  class="twitter-timeline" [attr.data-widget-id]="twitterWidgetId"></a>'
})
export class AppComponent implements AfterViewInit {
    twitterWidgetId = '973470934035202049';

    ngAfterViewInit() {
       twttr.widgets.load();          
    }
}