Question

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

            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实例...你可以通过使用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()
                }
        }

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

Angular 2 Jquery插件 - 导航然后返回页面时出现问题

1 个答案: