标签: ngx-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之间重复的问题？.

我正在使用bootstrap(UI)和angular 2制作项目.我对这两件事情都很陌生我的朋友建议我使用ng2 bootstrap我在ngx bootstrap和ng2 bootstrap之间非常困惑.总是当我搜索2个bootstrap时,它会带我到ngx bootstrap.两者有什么区别？

我在使用 ngx-bootstrap 的应用程序中遇到问题，除非您指定路径，否则它现在无法检测到模块

例如：

import { BsModalService, BsModalRef } from 'ngx-bootstrap';

产生“找不到模块‘ngx-bootstrap’ ”。

删除参考并检查快速修复只是将参考替换为：

import { BsModalService, BsModalRef} from 'ngx-bootstrap/modal/public_api';

显然这并不理想，因为它们应该可以在不指定文件夹的情况下通过 ngx-bootstrap 获得，而且我将不得不通过几十个组件并更改这些不必要的引用。以前有人遇到过这个问题吗？

我已经试过了：

• npm install
• npm update 如果最近提交有更新
• 删除 node_modules 文件夹并npm install再次执行
• 自行重新安装 ngx-bootstrap - npm install ngx-bootstrap --save
• npm cache clean
• 我什至重新开始并将我的应用程序克隆到另一个位置，运行npm install，并且发生了同样的事情

昨天这工作正常。我不确定我错过了什么。

更多信息：

Angular CLI: 9.0.2
Node: 12.16.1
OS: win32 x64
Angular: 9.0.1

包.json：

    "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular-devkit/build-angular": "^0.900.7",
    "@angular/animations": "9.0.1",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "9.0.1",
    "@angular/compiler": "9.0.1",
    "@angular/core": …

在我的Angular 4应用程序中,我们假设我在服务中.

在某些时候,我想要求用户进行确认,目前我只是在做一个confirm(...)请求:

const result = confirm('Are you sure?');

如果相反我想显示一个ngx-bootstrap 模态,比方说,两个按钮"是"或"否",并获得类似的结果？

编辑:在我的情况下,我通过玩主题解决了我的问题.在这里,您可以找到我的解决方案,以防它对其他人有用.然而,该解决方案并没有解决这个问题,即从模态返回一个值,所以我把它打开.

ngx-bootstrap组件列表中不存在Bootstrap导航栏.请帮我实现它.

尝试使用像这样的CSS 中心这个ngx-boostrap模态,但它不起作用:

.modal.fade.in{
  display: flex;
  justify-content: center;
  align-items: center;
}

但是在开发工具中,我可以像这样添加CSS:

.modal.dialog{
  top: 50%
}

所以至少它是垂直居中的,但这是在开发工具中,并且html模板中没有.modal.dialog类

有没有办法正确居中ngx-bootstrap模式？

我想通过提供输入消息并添加是/否对话框并输出用户选择(使用EventEmitter)来创建一个通用模态组件以在任何地方使用它

我在以下Plunker中找到了一个示例,但无法在单独的自定义组件中重现它.

plunker示例来自这个网站:https://github.com/valor-software/ngx-bootstrap/issues/2334

更新:

在@Wira Xie回答之后,当我使用静态模态和这个CSS时:

.modal-sm
{
  top: 50%;
  left: 50%;
  width:30em;
  height:18em;
  background-color: rgba(0,0,0,0.5); 
}

模态显示居中,但只有Esc key可以隐藏它,所以当我点击模态外,它仍然可见.

在这里查看ngx-bootstrap 源代码时:

莫代尔,options.class.ts

有一个可选的class property定义为class?: string;.

使用它的方法是什么？

是否可以添加自定义类,如:

this.modalService.config.class = 'myClass';

在使用servive之前,例如:

this.modalRef = this.modalService.show(template, {
  animated: false
});

这样,我认为我们可以将自定义CSS添加到显示的模态中

最佳实践或示例是什么？

我试图添加自定义类但没有成功

该类属性不是数组,如果适用,是否意味着我们只能添加一个自定义类？

演示:通过添加和覆盖modal类,模式不显示

https://stackblitz.com/edit/ngx-bootstrap-3auk5l?file=app%2Fapp.component.ts

以modal这种方式添加类没有帮助:

this.modalRef = this.modalService.show(template, Object.assign({},
                this.config, { class: 'gray modal-lg modal' }));

https://stackblitz.com/edit/ngx-bootstrap-awmkrc?file=app%2Fapp.component.ts

我是棱角分明的新手.

我使用了包ng2-bootstrap使用了bootstrap模式.

我的查看文件是

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Area Master</h4>
        <button type="button" class="close pull-right" (click)="lgModal.hide();" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal Content here...

      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</div>

我需要知道如何从组件(类型脚本文件)中显示/隐藏此模式.

输入脚本文件是

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms';
import { Area …

我正在使用角谷歌地图(agm)我通过以下方式创建谷歌自动完成.

在HTML中

  <input type="text" #pick id="address" class="form-control" [(ngModel)]="pickAddress" name="pickAddress" (ngModelChange)="pickAdd()" placeholder="Pick Up Address" onclick="return false" style="padding-left: 30px;border-radius: 25px;border: 1px solid #31708f;"

在Ts文件中:

pickAdd() {
  var autocomplete:any;
  var options = { componentRestrictions: {country: "IN"} };
  this. inputAddress = document.getElementById('address');
  autocomplete = new 
  google.maps.places.Autocomplete(this.inputAddress,options)
  google.maps.event.addListener(autocomplete, 'place_changed', ()=> {
    this.ngZone.run(() => {
      this.zoom=8;
      var place = autocomplete.getPlace();
      this.lat = place.geometry.location.lat();
      this.lng = place.geometry.location.lng();
      this.getGeoLocation(this.lat,this.lng);
    });
  });
}

CSS:

sebm-google-map {
    height: 300px;
}

如果我将上述代码放在bootstrap模式中,则谷歌自动完成功能无效

注意:

上面的代码工作没有bootstrap模式(在普通视图中)

我试图让我的前端应用程序(Angular5.1.x)运行但由于模板解析错误而停止:

"let-" is only supported on ng-template elements. ("
</thead>
<tbody>
<template ngFor [ngForOf]="rows" [ERROR ->]let-rowz="$implicit" let-    index="index">
<tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].sec"):     
ng:///DatepickerModule/DayPickerComponent.html@52:58
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24633)
    at JitCompiler._parseTemplate (compiler.js:34442)
    at JitCompiler._compileTemplate (compiler.js:34417)
    at compiler.js:34318
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34318)
    at compiler.js:34188
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34187)

我想我需要遵循这个主题问题,说我需要使用ngx-bootrap @ ngx-bootstrap @ 2.0.0-beta.8,但它不适用于那个或v.2.0.0-rc.0

https://github.com/valor-software/ngx-bootstrap/issues/3024

...任何帮助表示赞赏