Question

我试图在我的离子2应用程序中使用twitter嵌入时间线。到目前为止，我有下面显示的代码，但是在用户离开视图后时间线消失了？这里有什么东西我不见了？

<ion-header>
 <ion-navbar>
   <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
    <ion-title>Social Media</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding> 
  <a class="twitter-timeline"  href="https://twitter.com/hashtag/amyawards2017" data-widget-id="837781109337436160">#amyawards2017 Tweets</a>
  <!--<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>-->
</ion-content>




export class SocialMediaPage{
  constructor(public navCtrl: NavController,
  private loadingCtrl: LoadingController,private toastCtrl: ToastController,
  private alertCtrl: AlertController,
  public twitter: TwitterService) {

  }

   ngAfterViewInit() {
            !function(d,s,id){
                var js: any,
                    fjs=d.getElementsByTagName(s)[0],
                    p='https';
                if(!d.getElementById(id)){
                    js=d.createElement(s);
                    js.id=id;
                    js.src=p+"://platform.twitter.com/widgets.js";
                    fjs.parentNode.insertBefore(js,fjs);
                }
            }
            (document,"script","twitter-wjs");
    }



}

Answer 1

用这个替换你的ngAfterViewInit。

!function(d,s,id){
            var js: any,
                fjs=d.getElementsByTagName(s)[0],
                p='https';
                js=d.createElement(s);
                js.id=id;
                js.src=p+"://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js,fjs);
        }
        (document,"script","twitter-wjs");

我不知道它是否适合您，但我的应用程序是否有效。我希望它适合你。

Answer 2

用ionViewDidEnter替换ngAfterViewInit，例如

ionViewDidEnter() {
    !function(d,s,id){
        ...
    }
    (document,"script","twitter-wjs");
}

ngAfterViewInit仅在视图初始化时调用，而每次导航到（从另一个视图）视图时都会调用ionViewDidEnter

请注意，因此，如果您切换到同一页面中的其他内容，您仍会收到此错误（例如，如果您在页面上使用ionic segment）。如果是这种情况，您需要找到或设置适合您的事件，例如使用离子段：

HTML：

<ion-segment [(ngModel)]="model" (ionChange)="segmentChanged()">

TS：

updateTwitter() {
    !function(d,s,id){
        ...
    }
    (document,"script","twitter-wjs");
}
segmentChanged() {
    this.updateTwitter();
}
ionViewDidEnter() {
    this.updateTwitter();
}

Ionic 2 twitter嵌入式时间线问题

2 个答案: