标签: ng-bootstrap

我正在尝试使用 NgbInputDatePicker 输入选项下列出的放置选项。

我想更改弹出日期选择器的默认左下位置，但是当我尝试在 plunker 示例中使用放置时（https://ng-bootstrap.github.io/app/components/datepicker/demos/popup /plnkr.html）它不会改变弹出窗口的位置。

我试过了：

在输入标签内添加 [placement]="top"：

<input class="form-control" placeholder="yyyy-mm-dd"
         name="dp" [placement]="top" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">

我也尝试过将其放在父 div 中：

<div class="input-group" placement="top">
  <input class="form-control" placeholder="yyyy-mm-dd"
         name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">

但似乎都没有改变弹出位置。我是 Angular 的新手，所以也许我的语法有问题？我注意到文档中的其他输入 API 似乎是以这种方式使用的，所以我认为它可能会起作用......

我正在使用 ng-bootstrap 1.0.0-beta.2 和 Angular 4.3.4。

谢谢。

我想显示一个工具提示。我去了 ng-bootstrap 并集成了该代码。获取控制台错误。

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for 
NgbTooltipConfig!
Error: No provider for NgbTooltipConfig!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9492)
at NgModuleRef_.get (core.es5.js:10562)
at resolveDep (core.es5.js:11050)
at createClass (core.es5.js:10920)

在 app.module.ts 中添加了这些行

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

@NgModule({
  imports: [    
    NgbModule
  ]
})

使用命令安装 ng-bootstrap

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

使用 ng-bootstrap 手风琴模块，默认情况下它工作正常。尝试自定义切换功能，该功能将在单击按钮时立即显示/折叠。

经过一番调试，现在实现了功能。想要确定方法是否好。

这是我尝试过的：

笨蛋演示

成分：

    import { Component, ElementRef } from '@angular/core';
import {NgbAccordionConfig,NgbPanelChangeEvent} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-accordion-basic',
  templateUrl: 'src/accordion-basic.html',
  providers: [NgbAccordionConfig]
})
export class NgbdAccordionBasic {
  constructor(public config: NgbAccordionConfig, public elementRef: ElementRef) {
    // customize default values of accordions used by this component tree
    this.config.closeOthers = false;
  }
  toggle(event: NgbPanelChangeEvent, acc: NgbAccordion){
      if(acc.activeIds.length > 0){
        acc.panels._results.forEach(function(val, idx){
        val.isOpened = false;
        acc.activeIds.pop(val.id);
        });
      } else {
        acc.panels._results.forEach(function(val, idx){
        val.isOpened = true;
        acc.activeIds.push(val.id);
      });
      }

  }
}

HTML： …

我是 angular 的新手，并试图将 bootstrap 4 与 angular 结合使用。首先，我安装了 ng-bootstrap，如下所示：

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

和其他一些相关的东西 app.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
...
NgbModule.forRoot()

并添加一些样式.angular-cli.json（将以下代码放入styles数组）

"../node_modules/@bootstrap/dist/css/bootstrap.min.css"

一切都按预期工作，但风格！我意识到dist“../node_modules/@bootstrap/”地址中不存在子文件夹。
我也尝试使用构建项目ng build，但它仍然不存在。请注意，"outDir": "dist"已签入.angular-cli.json文件。
我错过了什么吗？

我的 angular 网站中有两个模块，一个是“bootstrap”，另一个是“ng-bootstarp”。

是否需要两个模块，还是需要任何一个？

我打算只保留“ng-bootstarp”4.0.0.0 并删除“bootstrap”

这样好吗？

还让我知道删除“引导程序”的步骤？

我可以继续从 ng_module 文件夹中删除引导程序还是我需要使用任何命令？

我正在尝试从父组件打开模型。所以，我从父组件打开了虚拟对话框，从以下方面获得帮助：如何将数据传递给 Angular ng-bootstrap modal for binding。在 Dialog 而不是虚拟文本上，我有输入框来显示来自父组件的信息，同时用户可以编辑此信息并要求此更改发送回父信息。我尝试使用令牌注入来执行类似 Angular Material MAT_DIALOG 的操作，但我并没有完全遵循它。

 import { Component, OnInit, InjectionToken, Injector, OnDestroy, 
  TemplateRef, Inject } from '@angular/core';
  import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

         export interface CancelDialogData {
            name: string; // this can be any string;
            Comments: string;
         }
        export declare const CUSTOM_DIALOG_DATA: InjectionToken<any>;

          @Component({
           selector: 'app-reject-dialog',
        templateUrl: './reject-dialog.component.html',
           styleUrls: ['./reject-dialog.component.css']
           })
           export class MyDialogComponent implements OnInit {

         constructor(public activeModal: NgbActiveModal,  
       @Inject(CUSTOM_DIALOG_DATA) public data: CancelDialogData) { }

          ngOnInit() {
                 }

              onCancelClick(): void {
                this.activeModal.close(); …

我将我的Angular-6项目用于ng-bootstrap，并使用了ngbootstrap-pills，我尝试添加带有删除按钮选项的活动药丸以下拉图标，但是它不起作用，任何人都知道如何正确地做到这一点。

这里有堆栈闪电代码

这是我的.css代码

.nav-pills .nav-link.active, .nav-pills.show> .nav-link {
    color: #fff;
    background-color: #262262;
}

a:after {
  content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

我试图做这张照片

谢谢。

Compiling @ng-bootstrap/ng-bootstrap : module as esm5
Error: Error on worker #1: Error: Failed to compile entry-point @ng-bootstrap/ng-bootstrap (module as esm5) due to compilation errors:
node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.js:148:43 - error NG1006: Cannot combine @Input decorators with query decorators

148         "starTemplate": [{ type: Input }, { type: ContentChild, args: [TemplateRef,] },],
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.module.js:12:51 - error NG6001: The class 'NgbRating' is listed in the declarations of the
NgModule 'NgbRatingModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's …

当将 ng-bootstrap 与 Angular 一起使用时，它工作正常。我不知道如何启用 TAB SECOND，因为页面加载时默认激活。谢谢。

<nav ngbNav #nav="ngbNav" class="nav-tabs">
    <ng-container ngbNavItem>
        <a ngbNavLink>One</a>
         <ng-template ngbNavContent>
          Om
       </ng-template>
    </ng-container>
    <ng-container ngbNavItem>
       <a ngbNavLink>Two</a>
        <ng-template ngbNavContent>
        Namaha
        </ng-template>
    </ng-container>
    <ng-container ngbNavItem>
       <a ngbNavLink>Three</a>
       <ng-template ngbNavContent>
        Shivaya
       </ng-template>
    </ng-container>
</nav>

有没有使用 Bootstrap 或 HTMl/CSS 构建的好的DatePickers我已经在使用这个https://ng-bootstrap.github.io/#/components/datepicker/examples 但它不适合我