Question

除了星号旁边带有星号的方括号之外，我的评级组件工作正常。为了解决这个问题，我添加了引导程序。这就是组件在atm

上显示的方式

检查组件显示以下内容，

<span class="sr-only ng-star-inserted">(*)</span>

我确实看过What is sr-only in Bootstrap 3?，并试图添加CSS来达到目的，但是没有运气。

因此，我在app.comonent.html中添加了BootstrapCDN，尽管我可以在页面加载时非常短暂地看到它，但评分组件完全消失了。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
</head>

<body>
  <!-- <div> -->
  <router-outlet></router-outlet>
  <!-- </div> -->
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

</html>

在stackblitz上的实现似乎非常简单ng-bootstrap example，但我不知道我要去哪里。

我确实在ng-bootstrap-github浏览了ng-bootstrap的文档，其中在第101行“或者将ng-template作为ngb-rating元素的唯一子元素” 。这样，即

<ngb-rating [(rate)]="currentRate" (click)="setCurrentRate()" [(ngModel)]="currentRate" class="sr-only">
    <ng-template></ng-template>
</ngb-rating>

评级组件停止运行。

Answer 1

这里有很多错误和误解。

ng-bootstrap不需要jQuery，popper.js和bootstrap的JS。它替代了所有提供真正的Angular API的功能
ng-bootstrap不适用于Bootstrap 3
您不得将类sr-only添加到ngb-rating中：sr-only表示“仅Creen Reader”。除屏幕阅读器外，它是看不见的，盲人用来“读取”页面。
ng-bootstrap 确实需要bootstrap 4 CSS，因为它的所有样式都依赖于它（因此名称为ng-bootstrap）

这一切在ng-bootstrap文档的getting started page中进行了说明。

app.component.html中包含<html>，<head>和<body>毫无意义：这是 component 的模板，被插入index.html页面。

评分组件未按要求运行

1 个答案: