Ionic 2 内部有 Reveal.js 演示文稿

Question

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

第一种方法工作正常，我所做的是一个简单的侧边菜单模板，其中包含一个加载 Reveal.js 演示文稿的页面。

起初它似乎工作正常，但是：

问题: 我第一次打开 Reveal.js 页面时，它加载正常，但如果我正在加载另一个页面，然后返回它，它就不会'加载演示文稿。

示例： 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 class 的多个实例，并在每次创建一个新实例时初始化一个进入页面。

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

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

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

Ionic 2 内部有 Reveal.js 演示文稿

Ionic 2 with Reveal.js presentation inside

javascript

reveal.js

ionic2

angular