标签: ng-bootstrap

"ng-bootstrap"和"ngx-bootstrap"有什么区别？它们是否相互关联？或者它们只是并发实现？

有人和他们一起工作,可以给出/解释两者的利弊吗？

使用"ng-bootstrap"我的意思是https://ng-bootstrap.github.io/#/home和

与"ngx-bootstrap"我的意思是http://valor-software.com/ngx-bootstrap/.

两者都与Angular 4(不是AngularJS!)和Bootstrap 4有关.

请注意,这不是ngx-bootstrap和ng2 bootstrap之间重复的问题？.

如何在元素中声明动态 模板引用变量ngFor？

我想使用ng-bootstrap中的popover组件,popover代码(带有Html绑定)如下所示:

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
    <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>

如何将这些元素包装在里面ngFor？

<div *ngFor="let member of members">
    <!-- how to declare the '????' -->
    <ng-template #????>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="????" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>

嗯......任何想法？

我在弹出窗口中使用了datepicker(ng-boostrap),我想将日期格式更改为dd-mm-yyyy.

似乎可以通过实现new NgbDateParserFormatter来替换默认值来解决它NgbDateISOParserFormatter.

但我想知道是否还有另一种方式.

更新:

NgbDateParserFormatter使用Moment.js的一个小实现(使用版本1.0.0-alpha.14的ng-bootstrap测试):

import {NgbDateParserFormatter, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import * as moment from 'moment';

export class NgbDateMomentParserFormatter extends NgbDateParserFormatter {
    constructor(private momentFormat: string) {
        super();
    };
    format(date: NgbDateStruct): string {
        if (date === null) {
            return '';
        }
        let d = moment({ year: date.year, 
                         month: date.month - 1, 
                         date: date.day });
        return d.isValid() ? d.format(this.momentFormat) : '';
    }

    parse(value: string): NgbDateStruct {
        if (!value) {
            return null; …

设置/覆盖模态的自定义宽度的最佳方法是什么？

似乎ng-bootstrap目前支持

尺寸:'sm'| 'LG'

但Bootstrap 4支持sm,md和lg.

理想情况下,我希望模态响应和调整类似于容器大小.在移动设备上全屏显示.

编辑: Bootstrap 4 _variables.scss似乎有$ modal-md设置但似乎未使用.

$modal-lg:                    800px !default;
$modal-md:                    500px !default;
$modal-sm:                    300px !default;

我有一个模态:

<template #warningModal let-c="close" let-d="dismiss">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Warning</h4>
  </div>
  <div class="modal-body">
      The numbers you have entered result in negative expenses.  We will treat this as $0.00.  Do you want to continue?
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">No</button>
    <button type="button" class="btn btn-secondary" (click)="submit()">Yes</button>
  </div>
</template>

每当我单击是,我希望它调用一个函数并关闭它自己.
在我的控制器@ViewChild('warningModal') warning;中submit(),我有this.warning.close();,而且我有,但this.warning.close is not a function每当我点击是时我都会得到.

我如何让它以我想要的方式工作？

我在Angular 4中使用ng-bootstrap,具体用例是"Component as content"的模式(来自https://ng-bootstrap.github.io/#/components/modal/examples的第二个场景).

我想从孩子那里向父母发出一些数据.为此,我从示例中创建了一个非工作插件:

modal.component.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';    
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
    </div>
    <div class="modal-body">
      <p>Hello!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="testclick('teststring')">Testclick</button>
    </div>
  `
})
export class NgbdModalContent {
  @Output() clickevent = new EventEmitter<string>();

  constructor(public activeModal: NgbActiveModal) {}

  testclick(teststring: string) {
    this.clickevent.emit(teststring);
  }
}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: 'src/modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() { …

将 ng-bootstrap 安装到我的 Angular-CLI(11.0.4) 时出现错误。什么时候

ng add @ng-bootstrap/ng-bootstrap 

还有我的日志文件

[error] Error: npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: front@0.0.0
npm ERR! Found: @angular/compiler@11.0.9
npm ERR! node_modules/@angular/compiler
npm ERR!   @angular/compiler@"~11.0.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.1.1" from @angular/localize@11.1.1
npm ERR! node_modules/@angular/localize
npm ERR!   peer @angular/localize@"^11.0.0" from @ng-bootstrap/ng-bootstrap@9.0.2
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     @ng-bootstrap/ng-bootstrap@"*" from the root project
npm ERR! 
npm …

我正在尝试将ng bootstrap UI集成到我的Angular 2项目中.按照此处的简单说明操作后: https://ng-bootstrap.github.io/#/getting-started使用任何ngb bootstrap标记时出现以下错误:

错误:没有NgbAlertConfig的提供者!

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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

import { HighlightDirective } from './highlight.directive';
import { StockService } from './stock.service';
import { DateFormatterPipe } from './date-formatter.pipe'

import { routing } from './app.routing';
import { DashboardComponent } from './dashboard/dashboard.component'

import { CurrencyService } from …

由于某种原因,我突然得到了这个错误,没有代码更改.会有什么想法导致这种情况？

我能够通过添加NgbModule.forRoot()我的导入来解决这个问题,但现在我收到此错误:

类型'typeof NgbModule'上不存在属性'forRoot'.

否则应用程序运行正常.

我更新到ng-bootstrap的v1.0-beta.现在,导航栏始终处于折叠状态.当我点击汉堡包来切换菜单时,它会打开,但会垂直而不是水平显示内容.

我已经包含了下面导航的代码.它和以前一样.在这一点上,如果问题出在ng-bootstrap,bootstrap 4或其组合中,我无法理解.

我理想的结果是菜单只有在屏幕处于特定大小时才会出现,就像过去一样.

我确实看到Bootstrap4导航栏总是崩溃.我打开了这个问题,因为它不包括ng-bootstrap.

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded fixed-top" style="background-color: white">
  <button class="navbar-toggler navbar-toggler-right" 
    type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" 
    aria-controls="exCollapsingNavbar2"
    data-toggle="collapse"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Vesalius - Bobby's World</a>
  <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse" id="exCollapsingNavbar2">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link" routerLink="/provider/portal/" routerLinkActive="active">Schedule</a>
      <a class="nav-item nav-link" routerLink="/patient/portal/medical-history" routerLinkActive="active">Form Editor</a>
    </div>

    <div class="navbar-nav">
      <form class="form-inline">
        <input class="form-control mr-sm-2" type="text" placeholder="Search Patient">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>