Angular 2 Jquery Plugin - 导航离开然后返回页面时出现问题

Question

我正在使用 Seriously 插件将 html 视频显示到画布元素上。这对于第一次访问该页面效果很好，但是当您向后导航时，所有视频都消失了。根本没有控制台错误

            import {Component, ViewChild, ElementRef, OnInit, } from '@angular/core';
            import {Observable} from 'rxjs/Observable';
            import {RouteTree, CanDeactivate, ROUTER_DIRECTIVES } from '@angular/router';

            declare let jQuery: any;
            declare let Seriously: any;
            declare let seriously: any;
            declare let thevideo: any;
            declare let target: any;
            declare let thevideoB: any;
            declare let targetB: any;
            declare let seriouslyB: any;


            @Component({
                selector: 'home', 
                templateUrl: './app/components/Homepage/list/index.html',
                directives: [ROUTER_DIRECTIVES]
            })

            export class HomepageListComponent implements OnInit {



                    ngOnInit() {

                        let seriously, thevideo, target, thevideoB, targetB, seriouslyB;
                        let container = jQuery('#masonry');

                        seriously      = new Seriously();
                        thevideo       = seriously.source('#video');
                        target         = seriously.target('#canvas');
                        target.source  = thevideo;
                        seriously.go();

                        seriouslyB     = new Seriously();
                        thevideoB      = seriouslyB.source('#videoB');
                        targetB        = seriouslyB.target('#canvasB');
                        targetB.source = thevideoB;
                        seriouslyB.go();


                    }
            }

Answer 1

这是一个猜测，因为这可能与 Seriously 插件更相关，但我的猜测是，当您离开页面时，您可能需要破坏 Seriously 实例...您可以通过可能使用 ngOnDestroy 来做到这一点方法：

        import {Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
        import {Observable} from 'rxjs/Observable';
        import {RouteTree, CanDeactivate, ROUTER_DIRECTIVES } from '@angular/router';

        declare let jQuery: any;
        declare let Seriously: any;
        declare let seriously: any;
        declare let thevideo: any;
        declare let target: any;
        declare let thevideoB: any;
        declare let targetB: any;
        declare let seriouslyB: any;


        @Component({
            selector: 'home', 
            templateUrl: './app/components/Homepage/list/index.html',
            directives: [ROUTER_DIRECTIVES]
        })

        export class HomepageListComponent implements OnInit, OnDestroy {
                seriously:any;
                seriouslyB:any;

                ngOnInit() {

                    let thevideo, target, thevideoB, targetB;
                    let container = jQuery('#masonry');

                    this.seriously      = new Seriously();
                    thevideo       = this.seriously.source('#video');
                    target         = this.seriously.target('#canvas');
                    target.source  = thevideo;
                    this.seriously.go();

                    this.seriouslyB     = new Seriously();
                    thevideoB      = this.seriouslyB.source('#videoB');
                    targetB        = this.seriouslyB.target('#canvasB');
                    targetB.source = thevideoB;
                    this.seriouslyB.go();


                }

                ngOnDestroy() {
                    if(this.seriously) this.seriously = null;
                    if(this.seriouslyB) this.seriouslyB = null;
                    // Or check the document for something in seriously that will handle the destruction for you like
                    //seriously.kill()
                }
        }

还将您的 Serious 和 SeriousB 变量从 let 更改为 class 变量，以便您可以将它们公开给类中的公共方法。希望这可能会有所帮助。