Angular 2 Jquery Plugin - Problem beim Navigieren weg und dann zurück zur Seite

Question

Ich benutze das Seriously-Plugin, um HTML-Video auf einem Canvas-Element anzuzeigen. Dies funktioniert beim ersten Besuch der Seite, aber wenn Sie zurück navigieren, verschwinden alle Videos. gibt es diese überhaupt erst

  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

keine Konsole Fehler ist eine Vermutung, da dies wahrscheinlich etwas mehr im Zusammenhang mit der ernsthaft Plugin, aber meine Vermutung ist, dass Sie wahrscheinlich die Ernst-Instanz zerstören müssen, wenn Sie von der Seite verlassen. .. Sie können dies tun, indem möglicherweise die ngOnDestroy Methode:

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

auch Ihr ernsthaft und seriouslyB Variablen von let zu Klassenvariablen ändern, damit Sie sie auf öffentliche Methoden innerhalb der Klasse aussetzen kann. Hoffe, das könnte helfen.