离子 2 与揭示.js里面的介绍

Question

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

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

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

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

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

揭示.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);       
}
}

揭示.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 Rereveal .js 版本中，有一个名为"多个演示文稿"的新功能，因此现在您可以创建 Reveal 类的多个实例，并在每次进入页面时初始化一个新实例。

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

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

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