Angular 2 Jquery 插件 - 导航离开然后返回页面时出现问题 [英] Angular 2 Jquery Plugin - Issue when navigate away then back to page

问题描述

我正在使用 Seriously 插件将 html 视频显示到画布元素上.这适用于第一次访问该页面，但当您返回时，视频全部消失.根本没有控制台错误

I am using the Seriously plugin to display html video onto a canvas element. This works fine for the first visit to the page but when you navigate back the videos all disappear. there is no console errors at all

            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();


                    }
            }

推荐答案

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

This is a guess as this is probably something more related to the seriously Plugin but my guess is that you probably need to destruct the Seriously instance when you navigate away from the page... You can do this by possibly using the ngOnDestroy method:

        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()
                }
        }

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

Also change your seriously and seriouslyB variables from let to class variables so you can expose them to public methods within the class. Hope this might help.

这篇关于Angular 2 Jquery 插件 - 导航离开然后返回页面时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！