Question

I'm working in a Reveal.js presentation, for future needs I'm wrapping it around an Ionic 2 app.

First approach is working fine, what I've done is a simple sidemenu template with a page that loads the Reveal.js presentation.

At first it seems to work fine, but:

issue: First time I open the Reveal.js page, it loads ok, but If I'm loading another page, and then returning to it, it doesn't load the presentation.

Example: 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()。 This github feature request是我唯一能找到的信息。

在4.0.0 Reveal.js版本中，有一个名为Multiple Presentations的新功能，因此，您现在可以创建Reveal类的多个实例，并在每次进入页面时初始化一个新实例。

即使我们不想并排显示多个演示文稿，这也解决了我在重新访问同一页面时不会再次加载Reveal幻灯片的问题。

关于如何在新的Reveal实例中存储<div class="reveal presentation">...</div>的简短示例可能是这样的：

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

Ionic 2 with Reveal.js presentation inside

1 个答案: