标签: ng-bootstrap

我在代码中使用了一个angular2 ng-bootstrap模式.

我希望当我在模态外单击时,模态不会关闭.目前,模式在外部点击时关闭.

在angular1中我曾经通过[keyboard] ="false"[backdrop] ="'static'"来做到这一点.但现在是时候它没有在angular2中工作了.

这是我的傻瓜

我的Open方法如下:

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }

我正在使用ng-bootstrap datepicker,但是当我保存表单时,日期会被保存为.

date: {
  day: 01,
  month: 12,
  year: 16
}

我希望我能把它当成更像的东西 "2016-11-23T00:39:31.768Z"

这是我的实现:

<div class="input-group">
  <button class="input-group-btn" (click)="d.toggle()" >
    <md-icon svgSrc="assets/images/calendar-plus.svg" style="cursor: pointer;"></md-icon>
  </button>
  <input class="form-control" placeholder="dd-mm-yyyy" name="dp" formControlName="due_date" navigation="arrows" ngbDatepicker #d="ngbDatepicker">
</div>

和form.component:

constructor( private fb: FormBuilder ) {
    this.form = this.fb.group({
      due_date: [''],
    });
  }

在最新版本的Bootstrap(当前版本提出问题时bootstrap@4.0.0-alpha.5)有3个不同的文件和标准的文件:

1. 自举flex.css
2. 自举grid.css
3. 自举reboot.css
4. bootstrap.css

前3个文件是bootstrap.css(#4)的扩展名吗？

我可以想象,bootstrap-flex使用CSS Flexbox的功能bootstrap-grid可能是旧的和已经存在的方式,但是呢bootstrap-reboot？

我必须包含哪一个(特别是如果我在Angular 2中使用ng-bootstrap)？

我NgbDropdown在Angular 2应用程序中使用该组件.它工作正常,但我想删除按钮右侧显示的箭头.

<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <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>

下拉图片

我有一个有角度的4页,包括一个ng-bootstrap模态.我的代码看起来像这样.

foo.html

[...]
<button class="btn btn-sm btn-secondary material-icons"
(click)="open(content)">search</button>

<ng-template #content let-c="close" let-d="dismiss">
    content in here
</ng-template>
[...]

foo.ts

[...]
constructor(private modalService: NgbModal) { }
[...]
open(content) {
   let options: NgbModalOptions = {
     size: 'lg'
   };

   this.modalService.open(content, options);
}
[...]

现在当我点击按钮时,模态打开.我现在要做的是在ngChanges上打开模型.

ngOnChanges(changes: any) {
   open(content)
}

我的问题是:我如何获得"内容"？有没有办法以编程方式获取ng-template？提前致谢!

在ng-bootstrap NgbDropdown中,您将如何显示所选按钮的文本,以便用户选择的项目替换最初显示的默认文本？

在下面的示例中,目标是显示用户选择的任何排序选项.

<div ngbDropdown class="d-inline-block">

  <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle>Sort by...</button>

  <div class="dropdown-menu" aria-labelledby="sortMenu">
    <button class="dropdown-item">Year</button>
    <button class="dropdown-item">Title</button>
    <button class="dropdown-item">Author</button>
  </div>

</div>

谢谢你的帮助!

ng下拉列表无效.

注意:我按照这里的答案并将bootstrap升级到4-alpha,但它不起作用.

下面是我的package.json文件:

    "@angular/animations": "^4.3.0",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/router": "^4.3.0",
    "@angular/upgrade": "^4.3.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
    "@types/jquery": "^3.2.8",
    "angular-calendar": "^0.19.0",
    "angular2-ladda": "^1.2.1",
    "angular2-text-mask": "^8.0.2",
    "angular2-toaster": "^4.0.1",
    "animate.css": "^3.5.2",
    "bootstrap": "4.0.0-alpha.6"

HTML代码:

<div ngbDropdown class="d-inline-block">
                <button class="btn btn-outline-primary nav-link dropdown-toggle" id="dropdownBasic1" ngbDropdownToggle>More Actions..</button>
                <div class="dropdown-menu dropdown-menu-right" 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>

在我的app.module.ts中也导入了ngbModule.

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

@NgModule({
  imports: [
    BrowserModule, …

我使用ASP.NET 2.0核心的JavaScript服务有角,并试图整合NG-引导.

我安装了ng-bootstrap:

npm install --save @ng-bootstrap/ng-bootstrap

我把它添加到webpack.config.vendor.js:

...
const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@ng-bootstrap/ng-bootstrap',  // <-- down here
    'zone.js',
];
...

我添加NgbModule到我的导入app.module.shared.ts:

...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        CommonModule,
        NgbModule.forRoot(),  // <-- this guy
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            ...
        ])
    ]
})
export class AppModuleShared {
}

我清理解决方案并运行: …

我正在创建一个角度6项目和一个库使用angular 6.在我的库中,我有一个需要的组件,angular cli所以我添加了它ng g lierary @some/libName.

当我尝试使用命令构建库时,@ng-bootstrap/ng-bootstrap它会抛出以下错误.

Dependency @ng-bootstrap/ng-bootstrap must be explicitly whiteliste

有没有人解决过它？

我在angular 4项目中使用ng-bootstrap:

<navbar class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <button aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarsDefault" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a> 
    <div class="collapse navbar-collapse" id="navbarsDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link active" routerlink="/dashboard" routerlinkactive="active" ng-reflect-router-link="/dashboard" ng-reflect-router-link-active="active" href="/dashboard">Dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerlink="/program" routerlinkactive="active" ng-reflect-router-link="/program" ng-reflect-router-link-active="active" href="/program">Programm</a>
            </li>          
        </ul>
    </div>
</navbar>

导航栏在那里,它是响应,它似乎工作正常.但导航栏切换按钮不会切换导航栏,当它折叠并且我找不到错误时.