在 Angular2 中导入 ng2-bootstrap 模态答案

【问题标题】：Importing ng2-bootstrap modal in Angular2在 Angular2 中导入 ng2-bootstrap 模态
【发布时间】：2016-11-04 18:57:21
【问题描述】：

我正在尝试使用ng2-bootstrap 的模态。所以我配置的一切都等于下面的例子：

import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(ROUTES),
        ModalModule
    ],
    providers: [ ]
})

但是我仍然收到以下错误：

无法读取未定义的属性“显示”

组件：

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>

我该如何解决这个问题？

【问题讨论】：

标签： angular angular2-template ng2-bootstrap

【解决方案1】：

模板变量区分大小写，在您的情况下为#lgmodal（小写“m”），您尝试在点击时显示lgModal（大写“M”）：(click)="lgModal.show()"。因此，只需更改您的模板变量，使其与来自(click) 事件的那个匹配：#lgModal。

【讨论】：

当然，没错！将 html 转换为 pug 时的一个愚蠢错误。谢谢:)