离子2内有Reveal.js表示

Question

我正在做一个Reveal.js演示，为了将来的需要，我把它包装在一个Ionic 2应用程序上。

第一种方法工作得很好，我所做的是一个简单的sidemenu模板，其中包含一个加载Reveal.js演示文稿的页面。

一开始它似乎很好，但是：

发布：当我第一次打开Reveal.js页面时，它会加载ok，但是如果我要加载另一个页面，然后返回到它，它就不会加载演示文稿。

示例：https://github.com/xanisu/ionic2-reveal.js

reveal.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as Reveal from 'reveal.js/js/reveal';

@Component({
  selector: 'page-reveal',
  templateUrl: 'reveal.html'
})

export class RevealPage {

 reveal : any;
 loaded : boolean = false;


onstructor(public navCtrl: NavController) {

 }
ngOnInit() { 
    console.log("ngOnInit!");
    this.reveal = Reveal;
    this.loadSlides();
}

loadSlides() {

    //this function is intended to load all dinamic content for slides (json, bbdd, webservice....)

     this.revealInit(); 
}
ionViewDidLeave() {
    this.loaded = false;
}
revealInit() {
    this.reveal.addEventListener( 'ready', ( event ) => {
        this.loaded = true;
    });

    let revealOptions = {
        controls: true,
        progress: true,
        slideNumber: false,
        history: false,
        keyboard: true,
        overview: true,
        center: true,
        touch: true,
        loop: false,
        rtl: false,
        shuffle: false,
        fragments: true,
        embedded: false,
        help: true,
        showNotes: false,
        autoSlide: 0,
        autoSlideStoppable: true,
        autoSlideMethod: Reveal.navigateNext,
        mouseWheel: false,
        hideAddressBar: true,
        previewLinks: false,
        transition: 'slide', // none/fade/slide/convex/concave/zoom 
        transitionSpeed: 'default', // default/fast/slow 
        backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom 
        viewDistance: 3,
        parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'" 
        parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" 
        parallaxBackgroundHorizontal: null,
        parallaxBackgroundVertical: null

    };

    this.reveal.initialize(revealOptions);       
}
}

reveal.html

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide 1</section>
        <section>
            <section>Vertical Slide 2.1</section>
            <section>Vertical Slide 2.2</section>
        </section>
        <section>Single Horizontal Slide 3</section>
    </div>
</div>

​

Answer 1

据我所知，在您的Reveal.js版本(3.5.0)中，您只能使用Reveal.initialize()一次。此github功能请求是我唯一能找到的关于它的信息。

在4.0.0 Reveal.js版本中，有一个名为多场演示的新特性，因此现在您可以在每次输入页面时创建Reveal类的多个实例并初始化一个新实例。

尽管我们不希望同时进行多个演示，但这解决了我的问题，因为重新访问相同的页面将不会再次加载显示幻灯片。

关于如何将<div class="reveal presentation">...</div>存储在新的Reveal实例中，一个简短的示例可能如下所示：

ngOnInit() { 
    console.log("ngOnInit!");
    let presentation = new Reveal(document.querySelector('.presentation'));
    presentation.initialize();
}