Question

我在Angular 4项目中使用Bootstrap 4和Ng-Bootstrap，

我已经在我的angular-cli.json中以这种方式链接了que bootstrap.css

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

并在我的app.module中导入了NgbModule，看起来像这样

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我做了一个Navbar从bootstrap网站复制文档，并添加了ng-bootstrap的toggle组件（效果很好），代码看起来像这样

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li>
        <div ngbDropdown class="d-inline-block">
          <div class="nav-link" id="dropdownBasic1" ngbDropdownToggle>Toggle 
dropdown</div>
          <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
            <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>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" 
aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" 
type="submit">Search</button>
    </form>
  </div>
</nav>

当我缩小窗口并且切换功能完成时，问题就出现了，当我按下按钮折叠导航栏时，它无法正常工作。

我尝试安装和链接jquery和popper以及bootstrap的js文件，但它仍然无法正常工作，实际的angular-cli.json看起来像这样

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

      ],

我做错了什么？

Answer 1

要使用角度，您需要此修复

首先在您的班级public navbarCollapsed = true;

中定义此内容

然后按下按钮

<button class="navbar-toggler" type="button" (click)="navbarCollapsed = !navbarCollapsed" [attr.aria-expanded]="!navbarCollapsed" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

你还需要将它添加到你的折叠div

<div class="collapse navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarSupportedContent">

现在你不需要jquery，popper或bootstrap.js

您可以找到有关此问题的更多信息here。

还要检查ng-bootstraps工作演示页面代码link。

Answer 2

查找已编译的类，可能是错误的版本。我对类col-sm-offset-＃有类似的问题，问题是这个类在该版本中不存在。也许可能是同一个问题

这是路由.. \ node_modules \ bootstrap \ dist \ js这里我们有两个文件 bootstrap.js和bootstrap.min.js

找到bootstrap.js的nav类。如果你找不到它，请寻找另一个Bootstrap存储库。

祝你好运。

Answer 3

我有同样的问题，我使用普通的bootstrap 4而不是ng-bootstrap，这样我也不需要app.module文件中的任何模块。有用。下面是添加到angular.json（angular v6）和bootstrap 4 +：

的脚本

"scripts": ["../node_modules/jquery/dist/jquery.js",
            "../node_modules/popper.js/dist/umd/popper.js", 
             "../node_modules/bootstrap/dist/js/bootstrap.js"]

对于CSS，我更喜欢使用Scss版本，所以就像这样。

"styles": [
              "src/styles.scss",
              "../node_modules/font-awesome/scss/font-awesome.scss"
            ],

然后我将bootstrap导入到style.scss文件

@import "~bootstrap/scss/bootstrap.scss";

干杯！ JK

Answer 4

这对我来说很好用我安装了 String str = "h"; String binary = new BigInteger(str.getBytes()).toString(2); int decimal = 0; int y = Integer.valueOf(binary); System.out.println(y); System.out.println(y); y = y + 0x00000001; String z = String.valueOf(y); System.out.println("V " + z); //byte[] bytes1 = z.getBytes("US-ASCII"); decimal = Integer.parseInt(z, 2); System.out.println(decimal);

app.module.ts

npm i --save @ng-bootstrap/ng-bootstrap ng add @angular/localize

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

NgbModule.forRoot() 不工作

angular.json imports:[NgbModule]"scripts": ["node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js]`

希望这会有所帮助，哪怕只是一点点

Bootstrap 4 Navbar在Angular4

4 个答案: