Bootstrap Modal with Angular 2
问题描述:
我正在使用Angular 2的模态。到目前为止这么好没有错误,但随后......当我按下按钮时什么也没有出现。我错过了什么吗?当然我做..Bootstrap Modal with Angular 2
这是我的模板
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
{{demoInfo | json}}
</div>
<div class="modal-body">
<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">
<div class="col-md-7">
Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'>
</div>
<div class="col-md-7">
Password: <input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password'>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button>
</div>
</div>
</div>
</div>
这是我的模板组件
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators } from '@angular/common';
class DemoInfo {
name: string;
password: string;
}
@Component({
template: require('./template.component.html'),
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES]
})
export class ModalComponent {
CreateGroup: ControlGroup;
demoInfo: DemoInfo;
constructor(fb: FormBuilder) {
this.demoInfo = new DemoInfo();
this.CreateGroup = fb.group({
'name': new Control(this.demoInfo.password),
'password': new Control(this.demoInfo.password)
})
}
addNewGroup(demoInfo: DemoInfo) {
console.log(demoInfo, 'whole object');
this.demoInfo = new DemoInfo();
}
}
答
我没有在Angular js中添加ng2-bootstrap库。
如果您是Angular的新手,并且想要实现引导js组件,那么我推荐您阅读ng2文档的正确方法。
答
- 确保选中已经安装Bootstrap.js。没有它,Angular-ui将无法工作。
-
确保在脚本标记中首先安装Bootstrap。
SRC = “〜/脚本/ bootstrap.js”
SRC = “〜/脚本/ angular.js”
SRC = “〜/脚本/应用/ app.js”
src =“〜/ Scripts/ui-bootstrap-tpls-2.0.0.js”
请确保您在模块中添加了对ui.bootstrap的依赖关系(至少在Angular 1.5中)我不熟悉Angular 2.
让我知道如果这不能解决您的问题。