html - 应用轮播问题Angular 11，Bootstrap

Question

好的，所以我有角度应用。我想在我的主页上使用 app-carousel。看起来像那样

<div class="row" style="margin-bottom:10px; margin-top:70px;">
    <div class='col-12'>  
            <ngb-carousel>  
                <ng-template ngbSlide>  
                    <img src="../../../assets/img-carousel/carousel1.jpg" class="img-fluid" style=" width: 100%"  alt="Futsal Practice">  
                    <div class="carousel-caption">  
                        <h3 style="color: rgb(255, 255, 255)">Futsal Practice</h3>  
                    </div>  
                </ng-template>  
                <ng-template ngbSlide>  
                    <img src="../../../assets/img-carousel/carousel2.jpg" class="img-fluid" style=" width: 100%"  alt="Tennis Practice">  
                    <div class="carousel-caption">  
                        <h3 style="color: rgb(255, 255, 255)">Tennis Practice</h3>  
                    </div>  
                </ng-template>  
                <ng-template ngbSlide>  
                    <img src="../../../assets/img-carousel/carousel3.jpg" class="img-fluid" style=" width: 100%"  alt="Basketball Practice">  
                    <div class="carousel-caption">  
                        <h3 style="color: rgb(255, 255, 255)">Basketball Practice</h3>  
                    </div>  
                </ng-template>  
            </ngb-carousel>  
        </div>  
</div>   

在我的主页组件中，我想使用它：

 <app-carousel></app-carousel> 

 <div class="row text-center">

    <div class="col-lg-3 col-md-6 mb-4" *ngFor="let field of fields">
      <div class="card h-100" >
        <img class="card-img-top" src="{{ field.imgUrl }}" height="150px" alt="">
        <div class="card-body">
          <h5 class="card-title">{{ field.name }}</h5>
          <p class="card-text"> <b> {{ field.priceHour }} PLN / Hour </b>  </p>
          <p class="card-text">(Time Schedule: {{ field.openTime }}:00 - {{ field.closeTime }}:00) </p>
        </div>
        <div class="card-footer">
          <a (click)="redirectToAngularCalendar(field)"  style="color:#fff; cursor: pointer;" class="btn btn-primary">Check Time Slots</a>
        </div>
      </div>
    </div>
  </div>

当然我在 angular.json 中也有这一行

  "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],

并在导入 app.module.ts 中安装引导程序。问题是因为如果我有这条线，我什么都看不到，包括主页 html 代码。从主页开始，我的网站上的一切都消失了。没有错误，没有任何东西，我完成了。我希望你们能帮助我。

标签： htmlangularcarouselangular-ui-bootstrap