2

ng2-bootsrap カルーセルに問題があります。ページ内のカルーセル コードがコメント アウトされている場合、ページ (/home2) は正常に読み込まれます。しかし、カルーセル コードが実行されている場合、ブラウザはサーバーがページを提供するのを待ち続け (サーバーは決してそうしません)、ページが空になります。参考までに、Angular Universal Starter プロジェクトを使用しています。

home2 コンポーネントで myInterval を 5000 に設定したカルーセル コードを次に示します。

<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') }`
  });
}

Angular Universal がループに陥っているように見えます。実装は次のとおりです。無限ループを回避するために間隔を無効にしたインテリア デザインのアイデア。誰かがこれを修正する方法を教えていただければ幸いです。任意の提案をいただければ幸いです。

ありがとう

4

1 に答える 1