在Angular2中导入ng2引导模式
我试着用情态动词。因此,我将所有内容配置为如下示例:在Angular2中导入ng2引导模式,angular,angular2-template,ng2-bootstrap,Angular,Angular2 Template,Ng2 Bootstrap,我试着用情态动词。因此,我将所有内容配置为如下示例: import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, ... ], imports: [ BrowserModule, FormsModule
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>
模板:
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”):(单击)=“lgmodal.show()”
。因此,只需更改模板变量,使其与(单击)
事件:#lgModal
中的变量匹配即可。当然,这是正确的!将html转换为哈巴狗时犯了一个愚蠢的错误。谢谢:)