[英]Importing ng2-bootstrap modal in Angular2
我正在嘗試使用ng2-bootstrap的模態。 所以我配置的所有內容都等同於以下示例:
import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(ROUTES),
ModalModule
],
providers: [ ]
})
但是我仍然收到以下錯誤:
無法讀取未定義的屬性'show'
零件:
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;
}
模板:
<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>
我怎樣才能解決這個問題?
模板變量區分大小寫,在您的情況下它是#lgmodal
(小寫“m”)並且您嘗試在單擊時顯示lgModal
(大寫“M”):( (click)="lgModal.show()"
。 因此,只需更改模板變量,使其與(click)
事件匹配: #lgModal
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.