javascript - 将引导插件添加到 Angular 8

Question

我是 Angular 的新手，并试图弄清楚如何将 Bootstrap 插件，特别是Bootstrap Toggle引入 Angular 8。这是我尝试过的。

已安装bootstrap, jquery, popper.js,bootstrap-toggle

在angular.json我添加

    "styles": [
      "src/styles.css",
      "./node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css",
      "./node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "scripts": [
      "./node_modules/jquery/dist/jquery.min.js",
      "./node_modules/popper.js/dist/umd/popper.min.js",
      "./node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]

在app.module.ts我添加的

import bootstrap from "bootstrap";

然后为了测试，我将以下内容添加到app.component.html

<div class="container">
    <p> Please enter your name</p>
    <form class="form-inline">
        <div class="form-group col-sm-12 justify-content-center">
            <div class="col-sm-6">
                <input class="form-control" style="width:100%" #invitation>
            </div>
            <button type="submit" class="btn btn-primary">Search</button>

        </div>            
    </form>
    <input type="checkbox" checked data-toggle="toggle">
</div>

复选框未更改为切换。任何想法为什么？

https://stackblitz.com/edit/angular-tlghnn

标签： javascriptangulartwitter-bootstrapbootstrap-4

Answer 1

尝试像这样添加

<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>