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

1

我有同样的问题，但找到了解决方案，ng2-bootstrap 使用浏览器元素并且需要等到客户端中的应用程序引导，您必须创建自己的与通用或*ngIf兼容的轮播等到引导程序，您必须在组件中检查以下代码：

import {isBrowser} from "angular2-universal";

if (isBrowser) {
  //example 
    this.showCarousel = true;
}
于 2017-02-21T12:16:32.640 回答