2016-07-26 10 views
0

Ich versuche, Fullpage.js mit Angular2 Projekt zu verwenden. Also, in meinem index.html, ich habe folgenden:Verwenden von Fullpage.js mit Angular2

<html> 
    <head> 
     .... 
     <link rel="stylesheet" type="text/css" href="styles/jquery.fullPage.css" /> 
     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery.fullPage.min.js"></script> 
     <script type="text/javascript" src="js/jquery.fullPage.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('#fullpage').fullpage(); 
      }); 
     </script> 
    </head> 
    <body> 
     <div class="container" id="fullpage"> 
       <app-root>Loading...</app-root> 
     </div> 
    </body> 
</html> 

Da dieses Angular2 Projekt habe ich ein paar Seiten weitergeleitet und jede Seite enthält eine geringe Anzahl von Abschnitten. Zum Beispiel in home.html:

<section id="home_section1" class="section"> 
    some text 
</section> 
<section id="home_section2" class="section"> 
    some text 
</section> 

Allerdings ist die blattgr nicht. Ich kann überhaupt nicht blättern. :(Es funktioniert nur, wenn ich die Abschnitte Tag innerhalb index.html setzen, was bedeutet:

<html> 
     <head> 
      .... 
      <link rel="stylesheet" type="text/css" href="styles/jquery.fullPage.css" /> 
      <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
      <script type="text/javascript" src="js/jquery.fullPage.min.js"></script> 
      <script type="text/javascript" src="js/jquery.fullPage.js"></script> 
      <script> 
       $(document).ready(function() { 
        $('#fullpage').fullpage(); 
       }); 
      </script> 
     </head> 
     <body> 
      <div class="container" id="fullpage"> 
        <section id="home_section1" class="section"> 
         some text 
        </section> 
        <section id="home_section2" class="section"> 
         some text 
        </section> 
      </div> 
     </body> 
</html> 

Kann jemand mir bitte helfen :(

+0

Haben Sie sich die Liste der eckigen Anweisungen im Abschnitt [Ressourcen der Dokumentation von fullpage.js] (https://github.com/alvarotrigo/fullPage.js#resources) angesehen? – Alvaro

+0

Sie müssen die ganze Seite innerhalb der ngOnInit-Methode der Komponente initialisieren. 'ngOnInit(): void { $ ('# vollseite'). fullpage(); } ' – Alexus

Antwort

1

bisschen spät, aber es gibt Häfen blattgr für angular2 jetzt.

prüfen Sie dies diejenigen:

ngx-fullpage

ng2- fullage

+0

die nicht so gut mit viel Flexibilität wie die native Vanille funktionieren. – Rexford