Question

我正在使用angular 2（使用cli创建的项目）并安装了bootstrap。

然后将bootstrap CSS添加到angular-cli.json然后样式工作，但是当我有带下拉菜单的导航栏时它不打开它们。我以为是因为错过bootstrap.js然后在angular-cli.json的脚本部分添加了它，它抱怨jquery !!然后补充说。

它开始工作但我不确定我在做什么是正确的。

粘贴angular-cli.json作为参考。

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": ["./js/jquery.js",     "../node_modules/bootstrap/dist/js/bootstrap.js"],

Answer 1

我建议使用一个库，它提供Angular 2与Bootstrap的本机集成。 https://ng-bootstrap.github.io库具有出色的API，易于使用。好消息是，它也支持下拉菜单，如下所示：https://ng-bootstrap.github.io/#/components/dropdown

使用上面提到的库，您不需要安装jQuery也不需要安装Bootstrap的JS（只需要CSS），并且下拉菜单非常容易使用（注意 ngbDropdown 和 ngbDropdownToggle 指令）：

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
    </div>
</div>

嘿，甚至有一个现实的例子：http://plnkr.co/edit/mSV1qxTwLgL55L1kWmd9?p=preview

Answer 2

我浏览了ng2-bootstrap文档。没看到导航栏已经完成。当我看到它时会重构。

但是，我确实遇到了一个非常简单的教程，它不需要你使用jquery。 https://medium.com/@ct7/the-simple-way-to-make-a-mobile-angular-2-bootstrap-navbar-without-jquery-d6b3f67b037b

请注意，作者提出了对媒体查询的引用

@media（min-width：768px）{...}

如果您已经拥有bootstrap css样式链接，则无需这样做转到我的navbar组件并添加了必要的属性并单击处理程序

using System;
using System.Runtime.InteropServices;

class Program
{
    const int STD_OUTPUT_HANDLE = -11;
    const uint ENABLE_VIRTUAL_TERMINAL_PROCESSING = 4;

    [DllImport("kernel32.dll", SetLastError = true)]
    static extern IntPtr GetStdHandle(int nStdHandle);

    [DllImport("kernel32.dll")]
    static extern bool GetConsoleMode(IntPtr hConsoleHandle, out uint lpMode);

    [DllImport("kernel32.dll")]
    static extern bool SetConsoleMode(IntPtr hConsoleHandle, uint dwMode);

    static void Main()
    {
        var handle = GetStdHandle(STD_OUTPUT_HANDLE);
        uint mode;
        GetConsoleMode(handle, out mode);
        mode |= ENABLE_VIRTUAL_TERMINAL_PROCESSING;
        SetConsoleMode(handle, mode);

        const string UNDERLINE = "\x1B[4m";
        const string RESET = "\x1B[0m";
        Console.WriteLine("Some " + UNDERLINE + "underlined" + RESET + " text");
    }
}

在导航栏html模板

上添加了点击处理程序

  isIn = false;

 toggleState() { // click handler for navbar toggle
    const bool = this.isIn;
    this.isIn = bool === false ? true : false;
 }

将 ngClass 添加到我想要崩溃的div

 <button type="button" class="navbar-toggle" aria-expanded="false" aria-controls="navbar" (click)="toggleState()">

Answer 3

是的，它可能对你有用，有时候使用Jquery和Angular可能会导致问题。 bcz bootstrap.js可能会在内部更改dom元素，因此在某些情况下可能会导致某些问题。

但我建议您使用ng2-bootstrap模块，这将允许您访问已经为angular2方式编写的Bootstrap组件。在这里，您还可以找到Dropdown组件。

Answer 4

您只需将这些链接复制并粘贴到index.html

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Angular JS 2 - Bootstrap导航栏下拉列表不起作用

4 个答案: