标签: ng-bootstrap
如何通过system.js向Angular2添加引导程序
我正在尝试通过https://github.com/ng-bootstrap/ng-bootstrap将bootstrap模块添加到我的ng2应用程序中.但总是得到这个错误:
这是我的索引文件,也许我的文件中有错误？index.html的:
<html>
<head>
<title>MyApplication</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/@ng-bootstrap/ng-bootstrap"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
</body>
</html>
完整的systemjs.config
/**
* System configuration for Angular 2 samples
* Adjust as necessary for …推荐指数
解决办法
查看次数
调用NgbModal open方法的最佳实践
使用NgbModal并且想要触发open方法 - > open(content: string | TemplateRef<any>, options: NgbModalOptions)< - 来自除模板代码之外的其他地方.在我的情况下,我想在我的组件的.ts文件中运行方法时传递一个字符串作为参数.当通过html文件中的按钮运行方法时,如下所示:<button (click)="open(content)">Launch demo modal</button>代码工作得很好,当然还有<template></template>html文件中的所有代码.
试着用这个来完成一些事情:
logoutScreenOptions: NgbModalOptions = {
backdrop: 'static',
keyboard: false
};
lockedWindow: NgbModalRef;
lockedScreenContent= `
<template #content let-c="close" let-d="dismiss">
<div class="modal-header" style="text-align: center">
<h3 class="modal-title">Title</h3>
</div>
<div class="modal-body">
<p>Body</p>
</div>
<div class="modal-footer">
<p>Footer</p>
</div>
</template>
`;
openLockedScreen(){
this.open(this.lockedScreenContent);
}
open(content) {
console.log(content);
this.lockedWindow = this.modalService.open(content, this.logoutScreenOptions);
this.lockedWindow.result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = …推荐指数
解决办法
查看次数
如何在Angular 2中设置ng-bootstrap组件的样式
我正在尝试将样式应用于我的Angular 2应用程序中的ngbTooltip组件.我将指令应用为:
<div [ngbTooltip]="tooltipText">
Element text
</div>
但是由于Angular 2应用了样式范围,我不能直接.tooltip在我的组件模板中设置类的样式.
如何为此特定组件提供自定义样式的工具提示？
编辑:
我有一个附加到我的组件的scss样式表.我的风格(简化)是:
.license-circle {
width: 10px;
... other styles
}
/deep/ .tooltip {
&.in {
opacity: 1;
}
}
但是我的渲染样式看起来像:
<style>
.license-circle[_ngcontent-uvi-11] {
width: 10px; }
.tooltip.in {
opacity: 1; }
</style>
这让我相信工具提示样式是未封装的(而不仅仅是刺穿这个组件的子代.
注意:我试过:host >>> .tooltip但它不起作用,所以我最终使用了/deep/.
谢谢!
推荐指数
解决办法
查看次数
Angular 2 ng-bootstrap模式:如何将数据传递给入口组件
我正在尝试将数据发送到自定义模态内容组件,以便我可以从任何其他组件调用它,而不是重复代码.我是Angular 2的新手,并且已经遵循ng-boostrap的"组件内容"演示以及Angular文档中的"组件交互",并且没有找到一种方法来实现这一点,或者是这个案例的一个例子.
我可以打开模态,但不能使用动态内容.我尝试了@Input变量方法并没有成功.我也加入ModalService了提供商app.module.ts.这就是我对两种方法都不起作用的方法:
page.component.html:
<a (click)="modal('message')">
<template ngbModalContainer><my-modal [data]="data"></my-modal></template>
page.component.ts:
import { Component } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { ModalService } from '../helpers/modal.service'
import { ModalComponent } from '../helpers/modal.component'
@Component({
selector: 'app-page',
templateUrl: './page.component.html',
styleUrls: ['./page.component.scss'],
entryComponents: [ ModalComponent ]
})
export class PageComponent {
data = 'customData'
constructor (
private ngbModalService: NgbModal,
private modalService: ModalService
) { }
closeResult: string
modal(content) {
this.data = 'changedData'
this.modalService.newModal(content)
this.ngbModalService.open(ModalComponent).result.then((result) => …推荐指数
解决办法
查看次数
Angular2:使用浏览器返回事件关闭ng-bootstrap模式
我的Angular2应用程序使用ng-bootstrap模式来详细显示一些结果图表.出于这个原因,我将模态调整为几乎全屏(仅margin: 20px左侧).这会导致某些用户使用浏览器后退按钮而不是页面右上角或底部的关闭按钮.
我现在正在尝试取消默认的浏览器返回事件,并在调用事件时关闭模式.
我在这里使用一些代码作为代码库来监听浏览器事件并用一些东西扩展它:
import { PlatformLocation } from '@angular/common'
(...)
modalRef: NgbModalRef;
constructor(location: PlatformLocation) {
location.onPopState(() => {
console.log('pressed back!');
// example for a simple check if modal is opened
if(this.modalRef !== undefined)
{
console.log('modal is opened - cancel default browser event and close modal');
// TODO: cancel the default event
// close modal
this.modalRef.close();
}
else
{
console.log('modal is not opened - default browser event');
}
});
}
(...)
// some code …推荐指数
解决办法
查看次数
错误TS2307:找不到模块'@ ng-bootstrap/ng-bootstrap'
我在角度5项目中添加了NGBootstrap.但过了一段时间它没有工作,我得到低于错误.试图通过升级CLI版本解决问题,但仍然没有解决问题.请检查package.json.
src/app/app.module.ts(5,27)中的错误:错误TS2307:找不到模块'@ ng-bootstrap/ng-bootstrap'.src/app/find-product/searchtabcontent/search-by-family/search-by-family.component.ts(2,48):error TS2307:找不到模块'@ ng-bootstrap/ng-bootstrap'
的package.json
{
"name": "ng5",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build --prod --base-href=/UI/pages/",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@ng-bootstrap/ng-bootstrap": "^1.1.2",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "^6.0.1",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2", …推荐指数
解决办法
查看次数
angular2 ngbdatepicker如何在inputfield格式化日期
我正在使用ng-bootstrap Datepicker.我想格式化输入字段中显示的日期,即模型.我看了API,没有找到任何其他例子,NgbDateParserFormatter
但没有解释太多:(
在Angular 1中,它就像添加属性一样简单format="MM/dd/yyyy".有人可以帮忙吗？
推荐指数
解决办法
查看次数
ng-bootstrap模态动画
淡入淡出类似乎不适用于ngb-modal.
我已经看过尝试将自己的动画应用到模态,但模态模板显然是通过ng-bootstrap注入到模态对话中,例如我无法访问模态对话框.我只能访问模板:
<template #content let-c="close" let-d="dismiss">
<div class="modal-header card-header" style="border-radius: 10px;">
<h4 class="modal-title">Contact Form</h4>
</div>
<div class="modal-body"> </div>
...etc
</template>
我需要将我的动画应用到顶级对话,否则只需要模态动画的位.如果我将它应用到模板,它就会爆炸.
知道如何动画整个模态吗？
推荐指数
解决办法
查看次数
Angular 4从模态获得形式值
当我提交表单时,我遇到了从模态中获取表单值的问题.日志说addMountForm是未定义的.我提供了我的html和组件的代码片段.我很感激你的帮助.
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h3 class="modal-title">Add Mount Point</h3>
</div>
<div class="modal-body">
<form (ngSubmit)="onSubmit()" #addMountForm="ngForm" >
<div class="form-group">
<label class="col-sm-2 control-label text-nowrap"
for="archiveOrigin">Archive Origin</label>
<div class="col-sm-10">
<input type="text" class="form-control" ngModel id="archiveOrigin" name="archiveOrigin" placeholder="Archive Origin"/>
</div>
</div>
<button type="submit" class="btn btn-default">Add</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="c('Close click')">
Close
</button>
</div>
</ng-template>
<div class="page pt-2">
</div>
@Component({
selector: 'mount-point',
templateUrl: './mountpoint.component.html',
styleUrls: ['./mountpoint.component.scss']
})
export class MountPointComponent implements OnInit {
@ViewChild('addMountForm') addMountForm : NgForm;
constructor(
private …推荐指数
解决办法
查看次数
@ ng-bootstrap NgbDatepicker遇到"无法绑定到'ngModel',因为它不是'ngb-datepicker'的已知属性"
我使用@ ng-bootstrap/ng-bootstrap和Angular2-cli
与NgbDatepicker遇到了错误:
NgModule:
@NgModule({
imports: [CommonModule,NgbModule.forRoot()],
declarations: [TestComponent],
exports: [TestComponent]
})
零件 -
导出类TestComponent实现OnInit {
model:NgbDateStruct;
}
和html--
<ngb-datepicker #dp [(ngModel)] ="model"> </ ngb-datepicker>
将TestModule添加到另一个模块时
@NgModule({
imports: [SharedModule,LoginRoutingModule,TestModule],
declarations: [LoginComponent],
})
和HTML:
<app-test></app-test>
有错误:
error_handler.js:47EXCEPTION: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'.
1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. …推荐指数
解决办法
查看次数