2016-11-28 10 views
1

ng2-bootsrapカルーセルに問題があります。ページのカルーセルコードがコメントアウトされると、ページ(/ home2)が正常に読み込まれます。しかし、カルーセルコードが実行されているとき、ブラウザはサーバーがページを提供するのを待っています(サーバーは決してそれをしません)、ページが空になります。参考までに、Angular Universal Starterプロジェクトを使用しています。ホーム2のコンポーネント5000にセットここng2-bootstrapのカルーセルがアンギュラユニバーサルをループに詰め込んでいます

がmyInterval有するカルーセルコードである:ここ

<carousel [interval]="myInterval" [noWrap]="noWrapSlides"> 
      <slide *ngFor="let slidez of slides;let index=index" [active]="slidez.active"> 
       <!-- <img [src]="slidez.image">--> 
       <div class="carousel-caption"> 
        <h4>Slide {{index}}</h4> 
        <p>{{slidez.text}}</p> 
       </div> 
      </slide> 
      <i class="fa fa-chevron-left left carousel-control"></i> 
      <i class="fa fa-chevron-right right carousel-control"></i> 
     </carousel> 

は、サーバ側の出力は、(発現)である:ここ

GET /home2 - - ms - - 
inside ngApp 
/home2 
GET /home2 - - ms - - 
nginside ngApp 
/home2 
GET /home2 - - ms - - 
inside ngApp 
/home2 
GET /home2 - - ms - - 

は、コンソールログでありますサーバー上のステートメント:

function ngApp(req, res) { 
    console.log("inside ngApp"); 
    console.log(req.originalUrl); 
    res.render('index', { 
    req, 
    res, 
    // time: true, // use this to determine what part of your app is slow only in development 
    preboot: false, 
    baseUrl: '/', 
    requestUrl: req.originalUrl, 
    originUrl: `http://localhost:${ app.get('port') }` 
    }); 
} 

これは私には見えますが、ユニバーサルはループ状に詰まっています。 実装は次のとおりです。無限ループを回避するために、間隔を無効にしたinterior design ideas。誰かが私にこの問題を解決する方法を教えてもらえれば幸いです。 ご意見をお待ちしております。

おかげ

+0

ちょっと..あなたが答えを得たら、ここで更新してください。私もこの問題で立ち往生した。 Thankx –

答えて

1

私はあなたが必要ブートストラップまであなたがユニバーサルと互換性のある独自のカルーセルを作成したり、* ngIf待機しなければなら同じ問題が、見つかったソリューション、NG2-ブートストラップ用ブラウザの要素を持っているし、クライアントでのアプリケーションのブートストラップするまで待つ必要があります以下のコードでコンポーネントチェックしてください:

import {isBrowser} from "angular2-universal"; 

if (isBrowser) { 
    //example 
    this.showCarousel = true; 
} 
+0

おかげさまで...あなたのソリューションは私にとってもうまくいきます。 –

関連する問題