内部带有 Reveal.js 演示的 Ionic 2答案

【问题标题】：Ionic 2 with Reveal.js presentation inside内部带有 Reveal.js 演示的 Ionic 2
【发布时间】：2017-11-17 18:17:24
【问题描述】：

我正在做一个 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>

【问题讨论】：

你在组件中使用什么代码来调用reveal.js，你可能钩入了错误的生命周期事件。如果它在ionViewDidLoad 中，pop 导航将不会再次触发代码，因为它需要一个缓存版本
它在ngOnInit() 事件调用中。可以在github repolink的reveal.ts文件中查看
你得到答案了吗？其实我也面临同样的问题。

标签： javascript angular ionic2 reveal.js

【解决方案1】：

据我所知，在您的 Reveal.js 版本 (3.5.0) 中，您只能使用一次 Reveal.initialize()。 This github feature request 是我能找到的唯一信息。

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

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

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

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

【讨论】：