Google Calendar intégré ne sera pas mise à jour

Question

Je le code HTML suivant dans ma page home.html:

<ion-content> 
    <ion-refresher (ionRefresh)="doRefresh($event)"> 
    <ion-refresher-content></ion-refresher-content> 
    </ion-refresher> 

     <div class="googleCalendar"> 
     <iframe src="https://calendar.google.com/calendar/embed?showDate=0&amp;showPrint=0&amp;showCalendars=0&amp;height=600&amp;wkst=2&amp;hl=ro&amp;bgcolor=%233366ff&amp;src=catalintium%40gmail.com&amp;color=%231B887A&amp;ctz=Europe%2FBucharest?nocache" 
      style="border-width:0" width="400" height="600" frameborder="0" scrolling="no"></iframe> 
     </div> 
</ion-content> 

Et ceci à l'intérieur de mes home.ts classe Page d'accueil:

doRefresh(refresher) { 
    console.log('Begin async operation', refresher); 

    setTimeout(() => { 
     console.log('Async operation has ended'); 
     refresher.complete(); 
    }, 2000); 
    } 

Le calendrier se montre , mais chaque fois que j'ajoute des événements dans le calendrier de Google, ils n'apparaissent pas dans mon calendrier, peu importe combien je rafraichis la page. Merci pour ton aide.

Answer 1

Eh bien, votre fonction doRefresh() enregistre seulement quelque chose à la console. Comment vous attendez-vous à actualiser la page s'il n'y a pas de logique pour le faire? Pour actualiser/recharger l'iframe contenant votre calendrier, vous devez obtenir une référence à l'iframe dans votre code, puis dans votre fonction d'actualisation, vous devez définir à nouveau la propriété src de l'iframe. Comment faisons-nous que `

Ajouter une variable de référence de modèle à votre iframe:

<iframe #myIframe src="https://calendar...> 

Puis en classe vos .ts vous ajoutez un ViewChild pour obtenir une référence au DOM-élément, et injectent le classe Renderer en vous constructeur:

export class YourClass { 
    @ViewChild('myIframe', { read: ElementRef }) iframeRef; 

    constructor(private renderer: Renderer) {} 
} 

Et dans votre fonction de rafraîchissement que vous définissez la propriété src à nouveau comme cela devrait rafraîchir l'iframe (de here):

doRefresh(refresher) {  
    this.renderer.setElementProperty(this.iframe.nativeElement, 'src', `https://calendar...`); 

    setTimeout(() => { 
    refresher.complete(); 
    }, 2000); 
} 

Cela devrait faire l'affaire.

Éditer: Si vous avez des problèmes avec la désinfection d'URL, jetez un oeil à la question this.