标签: ngx-bootstrap
在 ngx-bootstrap 中为 Angular 5 滑动带有动画的图像
我正在使用 ngx-bootstrap carousel 在主页中滑动图像。如何用动画滑动图像？
推荐指数
解决办法
查看次数
为什么 ngx-bootstrap tooptip 在某些层下
我们的项目使用了Angular 5和ngx-bootstrap. 当我使用tooltipof时ngx-bootstrap，发现tooltipalways在某些图层下，甚至它的z-index最高，这太奇怪了....有人知道如何解决这个问题吗？多谢。
推荐指数
解决办法
查看次数
如何在加载新页面之前添加旋转器？
所以我想添加一个像 ngx-admin 项目中那样的微调器http://akveo.com/ngx-admin/
我已将微调器添加到我的 index.html 中，微调器出现，但随后只有我的导航栏被渲染，并且微调器继续在应该显示模块的位置旋转。导航栏仅在模块本身中调用，而不是在路由模块中调用，这就是为什么我很困惑它不起作用。
<body>
<app-root>Loading...</app-root>
<style>
@-webkit-keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0)
}
100% {
-moz-transform: rotate(360deg)
}
}
@keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
.spinner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1003;
background: #000000;
overflow: hidden
}
.spinner div:first-child {
display: block;
position: relative;
left: 50%; …推荐指数
解决办法
查看次数
如何在 ngx-bootstrap/datepicker 中设置选定的日期，当将图标单击到常见的 html 输入中时启动该日期？
我有一个常见的 HTML date input，旁边有一个font-awesome图标。该图标具有启动 的功能bsDatePicker，但是，所选日期不会存储在任何地方。我想知道如何将所选日期转移到日期输入？
这是 HTML 代码：
//this is the common html input
<input type="date" class="form-control">
//and this is the fa icon that launches the calendar
<em #dp="bsDatepicker" bsDatepicker class="fa fa-search"></em>
如何将选定的日期存储在组件的变量中，然后以某种方式使输入用它更新其值？
谢谢！
推荐指数
解决办法
查看次数
ngx-bootstrap modal：如何将数据传递到modal component.ts而不是html模板？
我能够收集对象中传递的数据initialState，例如在这段代码中：
const initialState = {\n titulo: titulo,\n origen: origen,\n th1: "N\xc3\xbamero",\n th2: "Nombres",\n modalFor: "Locales"\n };\n this.bsModalRef = this.modalService.show(ClienteOlocalPopUpComponent, {\n initialState,\n backdrop: "static",\n keyboard: false\n });\n并在 ClienteOlocalPopUpComponent.html 中插入其属性。
\n\n但是，如果我希望传递给模态的值const initialState，比方说，通过ngOnInit()ClienteOlocalPopUpComponent.ts \xc2\xbf 的方法在控制台中打印，我该如何实现呢？它在模态的 .ts 文件中无法识别。
谢谢。
\n\n这是启动模式的组件的代码：
\n\n openModal(origen, titulo) {\n this.origen = origen;\n\n if (origen === "cliente") {\n const initialState = {\n titulo: titulo,\n origen: origen,\n th1: "RUT",\n th2: "Nombres",\n modalFor: "Clientes",\n rutClientes: this.requestTres.rutCliente,\n rutOperador: this.requestTres.rutOperador\n };\n this.bsModalRef …推荐指数
解决办法
查看次数
如何解决 Angular-14 中的 ngx-bootstrap 错误
在 Angular-14 项目中，我有这个package.json：
包.json：
"dependencies": {
"@angular/animations": "^14.0.0",
"@angular/common": "^14.0.0",
"@angular/compiler": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/forms": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0",
"@rxweb/reactive-form-validators": "^2.1.7",
"admin-lte": "3.2",
"google-libphonenumber": "^3.2.28",
"intl-tel-input": "^17.0.3",
"ngx-toastr": "^14.3.0",
"npm-check": "^5.9.2",
"rxjs": "~7.5.0",
"sweetalert2": "^11.4.17",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
ngx-bootstrap因此，当我决定使用ngx bootstrap安装时：
npm 安装 ngx-bootstrap --save
我收到这个错误：
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ddm-ui@0.0.0
npm ERR! Found: @angular/animations@14.0.1
npm ERR! …推荐指数
解决办法
查看次数
在Angular2/4中加载组件
我正在创建一个角度为4的应用程序,我希望有一个加载组件,以便用户可以意识到他提交了一个表单,而应用程序正在做某事,而且应用程序正在等待来自后端的信息.
我通过一个加载器组件并使用$ rootScope共享隐藏或显示的动作在angularjs中做到了...但是在angular2/4中,我看不出我怎么能这样做.
理想情况下,我需要有一个加载组件,它将在页面的一个表单或某个部分上(当正在检索属于该部分的信息时)或者可能在整个屏幕上.
你能告诉我怎么做这个吗？
谢谢!
推荐指数
解决办法
查看次数
如何在角度2测试中测试下拉切换操作？
我正在尝试测试下拉切换功能。但是我无法使它正常工作。我也已导入BsDropdownModule到规格文件。注意：我正在使用ngx-bootstrap。
这是我尝试过的：
HTML：
<div class="btnBox" dropdown placement="bottom right">
<button class="btnIcon dropdown-toggle" dropdownToggle>
</button>
<ul class="btnOptionBox dropdown-menu dropdown-menu-right" *dropdownMenu>
<li class="iconBtn" (click)="someFun()" type="button"><span>Edit</span></li>
<li class="iconBtn" (click)="someFun1()" type="button"><span>Delete</span></li>
</ul>
</div>
测试规格：
it("Should show options when toggle option is clicked",() => {
fixture.detectChanges();
let toggleButton = fixture.debugElement.queryAll(By.css('[dropdownToggle]'));
toggleButton[0].nativeElement.click();
fixture.detectChanges();
/*Unable to access li tag directly. That's why I have used it's parent*/
let list = fixture.debugElement.queryAll(By.css('div.ellipsisBox'));
console.log(list[0]); /*Shows the list in the children array*/
console.log(list[0].children); /*Doesn't show the list*/
});
有人可以建议正确的方法吗？
推荐指数
解决办法
查看次数
Ngx Bootstrap Popover一次只显示一个popover
我使用的角度做出酥料饼一次只能出现一次,这是plunker我使用angular5与NRX个自举.
因为我在项目中需要多个弹出框,但是如果我们按右上角的(x),弹出框应该关闭.
如果您先按下切换按钮,然后按"弹出标题和斧头按钮!",切换当前可以使用2个弹出窗口.如果弹出窗口当前打开,我的目标是禁用其他弹出窗口.
示例有4个popover,popover 1-4.如果popover 1打开,则无法打开其他弹出窗口.
如果我们关闭popover 1,其他popover可以打开.
<div>
<ng-template #popoverContent3>
<div style="font-size:18px; font-family:'Times New Roman'; font-weight:bold;">
<p>this is a title...
<button type="button" (click)='pop2.hide()' class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</p>
</div>
<div>
<p>The best looking pop over, with a TITLE!</p>
</div>
</ng-template>
<br><br><br><br><br><br><br>
<a [popover]="popoverContent3" #pop2="bs-popover" (click)="isOpen = !isOpen" [outsideClick]="false" placement="right">
Pop over with title and a x button!
</a>
</div>
<p>
<span popover="Hello there! I was triggered by input"
triggers="" [isOpen]="isOpen">
This text has attached popover
</span> …推荐指数
解决办法
查看次数
ngx-bootstrap - 用于输入的Timepicker弹出窗口
我正在使用ngx-bootsrap中的time-picker组件,我想将其包含在输入框中,如下所示.(更多弹出式对话框方式,用于日期选择器)time-picker
关于如何做到这一点的任何建议,因为根据文档,它总是使用time-pickerHTML指令.
eg:- <timepicker [(ngModel)]="mytime"></timepicker>
推荐指数
解决办法
查看次数
标签 统计
ngx-bootstrap ×10
angular ×8
angular5 ×3
typescript ×2
frontend ×1
html ×1
ngx-modal ×1
popover ×1
unit-testing ×1