Question

我最近开始使用Bootstrap项目开发Angular 2。我想在UI中添加bootstrap-toggle复选框。我下载并按照this网站上的说明操作。它不会将复选框显示为切换，但会将其显示为正常复选框。 Index.html是：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <![endif]-->
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>

  <script src="node_modules/jquery/dist/jquery.js"></script>

  <!-- Bootstrap JS dependencies-->
  <link rel="stylesheet" href="content/css/bootstrap.min.css" />
  <link rel="stylesheet" href="content/css/font-awesome.min.css">
  <link rel="stylesheet" href="content/css/bootstrap-toggle.min.css" />
  <link rel="stylesheet" href="content/css/app-styles.css" />
  <script src="content/js/bootstrap.min.js"></script>


  <!-- 1. Load libraries -->
  <!-- Polyfill(s) for older browsers -->
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>

  <!-- 2. Configure SystemJS -->
  <script src="systemjs.config.js"></script>


  <script>
    System.import('app').catch(
      function(err) {
        console.error(err);
      });

    $(function() {
      $('#showOpen').bootstrapToggle();
    })
  </script>

</head>

<body>

  <my-web-app>Loading ...</my-web-app>

  <script src="content/js/bootstrap-toggle.js"></script>

</body>


</html>

代码段

在这里，my-web-app调用一个Angular 2组件来创建一个表单。表单的复选框为

<div class="form-group">
  <label for="showOpen" class="col-md-4 control-label">Show Open :</label>
  <div class="col-md-1 checkbox">
    <input [(ngModel)]="model.showOpen" name="showOpen" type="checkbox" id="showOpen" data-toggle="toggle" checked class="control-form">
  </div>
</div>

这不显示复选框作为切换复选框。该复选框显示为普通的HTML复选框。

如您所见，我也在index.html中添加了初始化代码。

但是如果我在Index.html文件中添加切换复选框作为第一个元素（在my-web-app之前），它就会开始正确显示。不确定我错过了什么。能帮忙吗？

Answer 1

不建议通过角度应用内的$进行DOM选择。

如果真的需要使用jQuery，请参阅此处How to use jQuery with Angular2?以获得更好的解决方案。

同时查看http://angularjs.blogspot.ca/2016/04/5-rookie-mistakes-to-avoid-with-angular.html ......虽然它已过时但仍然为您提供了一个广阔的方向。

Bootstrap切换复选框不适用于Angular 2组件

1 个答案: