Modals with ngx-bootstrap give me error: Cannot read property 'show' of undefined
Modals with ngx-bootstrap give me error: Cannot read property 'show' of undefined
我正在使用 visual studio 2015 在 Angular2 中构建一个应用程序:主页中有两个按钮都提供相同的弹出窗口 window。一切都很好,直到我决定为这个模式制作一个单独的组件。所以按钮仍然在主页中,模态现在在另一个组件中。但是现在我得到了错误:无法读取未定义的 属性 'show'!在我的表演功能上。
这里是 modal.component.ts:
import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';
@Component({
selector: 'app-info-modal',
templateUrl: './info-modal.component.html',
styleUrls: ['./info-modal.component.scss']
})
export class InfoModalComponent implements OnInit {
@ViewChild('lgModal') public lgModal:ModalDirective;
constructor() { }
ngOnInit() {
}
showInfoModal = () => {
this.lgModal.show();
};
}
这里是modal.component.html:
<div bsModal #lgModal="bs-modal" [config]="{backdrop: 'static'}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title pull-left">what is it about?</h2>
<button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>content of the window.....</p>
</div>
</div>
</div>
</div>
主页组件中的按钮html:
<button class="btn-default btn pull-right next" (click)="showModal()"> privacy <i class="fa fa-fw fa-chevron-right"></i></button>
首页component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(){
}
ngOnInit() {
}
showModal() {
this.infoModal.showInfoModal();
}
有人知道吗?我不知道我哪里弄错了!
您应该使用以下内容作为 ViewChild
参考
@ViewChild(ModalDirective) public lgModal:ModalDirective;
更新 1:基于修改后的问题
您缺少如下 infoModal
参考,
export class HomeComponent implements OnInit {
@ViewChild(InfoModalComponent) infoModal : InfoModalComponent; ////// missing declaration
ngOnInit() {
}
showModal() {
this.infoModal.showInfoModal();
}
注意:当您使用 this.infoModal
时,您需要像上面那样声明它,否则您可以在 HTML 本身中使用它们作为
<button class="btn-default btn pull-right next" (click)="infoModal.showInfoModal()">
Show Information
</button>
<app-info-modal #infoModal> </app-info-modal>
我正在使用 visual studio 2015 在 Angular2 中构建一个应用程序:主页中有两个按钮都提供相同的弹出窗口 window。一切都很好,直到我决定为这个模式制作一个单独的组件。所以按钮仍然在主页中,模态现在在另一个组件中。但是现在我得到了错误:无法读取未定义的 属性 'show'!在我的表演功能上。 这里是 modal.component.ts:
import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';
@Component({
selector: 'app-info-modal',
templateUrl: './info-modal.component.html',
styleUrls: ['./info-modal.component.scss']
})
export class InfoModalComponent implements OnInit {
@ViewChild('lgModal') public lgModal:ModalDirective;
constructor() { }
ngOnInit() {
}
showInfoModal = () => {
this.lgModal.show();
};
}
这里是modal.component.html:
<div bsModal #lgModal="bs-modal" [config]="{backdrop: 'static'}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title pull-left">what is it about?</h2>
<button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>content of the window.....</p>
</div>
</div>
</div>
</div>
主页组件中的按钮html:
<button class="btn-default btn pull-right next" (click)="showModal()"> privacy <i class="fa fa-fw fa-chevron-right"></i></button>
首页component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(){
}
ngOnInit() {
}
showModal() {
this.infoModal.showInfoModal();
}
有人知道吗?我不知道我哪里弄错了!
您应该使用以下内容作为 ViewChild
参考
@ViewChild(ModalDirective) public lgModal:ModalDirective;
更新 1:基于修改后的问题
您缺少如下 infoModal
参考,
export class HomeComponent implements OnInit {
@ViewChild(InfoModalComponent) infoModal : InfoModalComponent; ////// missing declaration
ngOnInit() {
}
showModal() {
this.infoModal.showInfoModal();
}
注意:当您使用 this.infoModal
时,您需要像上面那样声明它,否则您可以在 HTML 本身中使用它们作为
<button class="btn-default btn pull-right next" (click)="infoModal.showInfoModal()">
Show Information
</button>
<app-info-modal #infoModal> </app-info-modal>