[英]Importing ng2-bootstrap modal in Angular2
I'm trying to use modal of ng2-bootstrap . 我正在尝试使用ng2-bootstrap的模态。 So I configured everything equals to the examples as below:
所以我配置的所有内容都等同于以下示例:
import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(ROUTES),
ModalModule
],
providers: [ ]
})
However I'm still getting the following error: 但是我仍然收到以下错误:
Cannot read property 'show' of undefined
无法读取未定义的属性'show'
Component: 零件:
import { ViewContainerRef } from '@angular/core';
@Component({
selector: 'any-comp',
encapsulation: ViewEncapsulation.None,
templateUrl: './any-comp.component.html'
})
export class AnyCompComponent implements OnInit {
private viewContainerRef: ViewContainerRef;
constructor(
private pageContentService: PageContentService,
viewContainerRef: ViewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
Template: 模板:
<button class="btn btn-primary" (click)="lgModal.show()">Large modal</button>
<div bsModal="bsmodal" #lgmodal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" (click)="lgModal.hide()" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Large modal</h4>
</div>
<div class="modal-body">...</div>
</div>
</div>
</div>
How can I fix this? 我怎样才能解决这个问题?
Template variables are case sensitive, in your case it is #lgmodal
(lowercase "m") and you are trying to show lgModal
on click (uppercase "M"): (click)="lgModal.show()"
. 模板变量区分大小写,在您的情况下它是
#lgmodal
(小写“m”)并且您尝试在单击时显示lgModal
(大写“M”):( (click)="lgModal.show()"
。 So, just change your template variable so it matches the one from (click)
event: #lgModal
. 因此,只需更改模板变量,使其与
(click)
事件匹配: #lgModal
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.