标签: ng-bootstrap

我正在使用Angular 2,我正在使用表单模式,我有两个组件,从一个组件我以这种方式打开表单模式:

import { Component, OnInit, Output} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { MyFormComponent } from '......./....';


@Component({
    moduleId: module.id,
    selector: 'my-component',
    templateUrl: 'my-component.html'
})
export class MyComponent implements OnInit {

    private anyData: any;
    private anyDataForm: any;


    constructor(
        private modalService: NgbModal
    ) { }

    ngOnInit(): void {
    }

    open() {
        const modalRef = this.modalService.open(MyFormComponent, { size: 'lg' });
        modalRef.componentInstance.anyDataForm = this.anyData;
    }

    possibleOnCloseEvet() { 
        //Do some actions....
    }

}

open()方法从my-component.html上的按钮触发

在Form组件(模态组件)上,我使用它来关闭实际模态(从它本身)

import { Component, …

我是Angular的初学者,我正在努力理解我从ng-bootstrap项目中读取的一些来源.源代码可以在这里找到.

我对ngOnInit中的代码非常困惑:

ngOnInit(): void {
    const inputValues$ = _do.call(this._valueChanges, value => {
      this._userInput = value;
      if (this.editable) {
        this._onChange(value);
      }
    });
    const results$ = letProto.call(inputValues$, this.ngbTypeahead);
    const processedResults$ = _do.call(results$, () => {
      if (!this.editable) {
        this._onChange(undefined);
      }
    });
    const userInput$ = switchMap.call(this._resubscribeTypeahead, () => processedResults$);
    this._subscription = this._subscribeToUserInput(userInput$);
  }

调用.call(...)这些Observable函数有什么意义？这试图实现什么样的行为？这是正常的模式吗？

作为我的Angular教育的一部分,我已经做了很多关于Observables(没有双关语)的阅读/观看,但我从未遇到过这样的事情.任何解释将不胜感激

我已经设置了一个触发NgbPopover悬停的元素:

<a [ngbPopover]="popContent" popoverTitle="MyPopover" triggers="mouseenter:mouseleave">Hover me</a>

目前,当悬停元素时将显示弹出窗口,并在离开该区域时连续解除.我想要实现的是当用户将其悬停时保持弹出窗口打开,并且仅当用户离开元素或弹出窗口时才将其关闭.

这个问题可能是相关的,但从来没有得到答案.另一个受到关注的相关问题,提出的解决方案(例如,这个)使用jQuery.

我有一个使用ng-bootstrap创建的模态组件,如follow(只是一个正文):

<template #content let-c="close" let-d="dismiss">
    <div class="modal-body">
        <p>Modal body</p>
    </div>
</template>

它是角度2组件

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'my-hello-home-modal',
    templateUrl: './hellohome.modal.html'
})

export class HelloHomeModalComponent {
    closeResult: string;

    constructor(private modal: NgbModal) {}

    open(content) {
        this.modal.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            console.log(reason);
        });
    }
}

我真的希望能够从我网站上的其他组件调用此模式.我只想从我的homeComponent调用open方法.

看我的homeComponent

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-home',
    templateUrl: './home.component.html'
})

export …

使用反应形式我添加了ngbDatePicker:

<input type="text"
        id="business_incorp_date"
        class="form-control"
        formControlName="business_incorp_date"
        ngbDatepicker
        #incorporatedDatePicker="ngbDatepicker"
        (click)="incorporatedDatePicker.toggle()"
        readonly>

对于以下形式的表单模型:

this.form = this.formBuilder.group({
  id: [
    0, [Validators.required]
  ],

  // ... removed for brevity

  business_type: [
    '', [Validators.required]
  ],
  business_incorp_date: [
    '', [FormValidators.date] // <-- NOT REQUIRED BY MODEL
  ],
  business_desc: [
    '', [Validators.required]
  ]

  // ...
});

但是,如果该字段为空,则对于以下内容仍然是ngInvalid ngbDateFormat:

{ "ngbDate": { "invalid": { "year": null, "month": null, "day": null } } }

任何人都知道如何使DatePicker字段允许空字符串？

我有一个 Angular 应用程序，我在其中使用ng-bootstrap显示一个modal。

我的问题是 ngb 团队不支持拖动这些模态，而且显然没有计划很快这样做。

所以我的问题是：谁能告诉我如何使这样的模态可拖动？

提前致谢。

我需要模拟NgbModal以角度进行一些单元测试,但我不知道如何做到这一点.这是我的功能:

    openModal(deviceID: string, productID: string){
        const modalRef =  this.modalService.open(ProductModal)
        modalRef.componentInstance.content = {
            deviceId: deviceID,
            productId: productID
        } 
        modalRef.componentInstance.toEmit.subscribe(($e) => {
            if ($e === true) this.reloadList();
        });
    }

我应该做些什么？

在我的 Angular 5 应用程序中使用 "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.6" 版本时，一切看起来都很好。但是，如果我在模态窗口中有一个触发路线更改的按钮，则即使在路线更改之后，模态窗口也不会关闭。

在很少的研究中，我发现了类似的东西，在以前的引导程序版本中，点击模态窗口，我们用来查看特定组件内与模态窗口相关的代码，以及随着组件被销毁，甚至模态窗口被销毁时的路由更改。但是在当前版本中，我几乎在 body 标记的末尾看到了与模态窗口相关的代码，这些代码不受路由更改的影响。

无论如何要在路线更改时关闭模态？

我们在项目中使用ng-bootstrap Datepicker作为指令：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()" [(ngModel)]="model"
         (ngModelChange)="onDateSelected()">

在目前的行为是onDateSelected()和每一个时间变化的输入领域取得了当选择在日期选择器的日期被称为。

的期望的行为是onDateSelected()被称为每当在在日期选择器或将光标移动出的日期用户点击<input>（即模糊）。

我的方法是更改(ngModelChange)为(blur)：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
         [(ngModel)]="model">

但是，当从日期选择器中选择一个日期时，这将导致onDateSelected() 无法调用-之所以有意义，是因为光标不在内<input>。但是，dateSelected在搜索我可以调用的ng-bootstrap文档时，找不到某种-Event onDateSelected()：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
/* missing -> */ (dateSelected)="onDateSelected()" /* <- */ [(ngModel)]="model">

我有什么想念的吗？或者也许是实现此行为的另一种方法？我想不出是唯一有此要求的人...

我想更改ng bootstrap分页组件的样式并使用/deep/Angular 6应用程序中的链接.以下代码工作正常,但控制台显示警告,代码已被弃用.

那么,我应该如何更改它以摆脱警告？

这是我目前使用的CSS代码:

ngb-pagination /deep/ .page-item.disabled .page-link{
    background: none;
  }

 ngb-pagination /deep/ .page-item.active .page-link {
    background-color: #223C61;
    &:focus, &:visited{
      outline: none;
      box-shadow: none;
    }
  }