Ionic 2 Twitter嵌入時間線問題

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(); 
}