Question

我的home.html页面中有以下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>

这是我家里面的。首页课：

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

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

日历本身正在显示，但每次我在Google日历中添加活动时，无论我刷新多少页面，它们都不会出现在我的日历中。谢谢你的帮助。

Answer 1

那么，你的doRefresh()函数只会将某些内容记录到控制台。如果没有逻辑，你如何期望它刷新页面？

要刷新/重新加载包含日历的iframe，您需要在代码中获取对iframe的引用，然后在刷新函数中，您需要再次设置iframe的src属性。我们怎么做？“

将模板引用变量添加到iframe：

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

然后在.ts类中添加一个ViewChild以获取对DOM-Element的引用，并在构造函数中注入Renderer类：

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

  constructor(private renderer: Renderer) {}
}

在刷新功能中，您再次设置src属性，因为这会刷新iframe（来自here）：

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

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

这应该可以解决问题。

修改：如果您在进行网址整理方面遇到问题，请查看this问题。

嵌入式Google日历不会更新

1 个答案: