我试图使用有关封装和单一职责原则的想法,所以我想到了这个想法,其中我通过函数将ngb模态传递给子组件。但是我遇到了麻烦,因为子组件无法识别open
方法。这是我尝试实现我的想法的代码。
parent.component.ts
@ViewChild('showModal') showModal: NgbModal;
Menu: { title: string, action: Function, };
...
ngOnInit() {
let menu: Menu = {
title: "Hello",
action: function() {
this.modalService.open(this.showModal);
},
this.menu = menu;
}
parent.component.html
<child [menu]="menu"></child>
..
<ng-template #showModal let-c="close">
<div class="modal-body">
HELLO WORLD!!!
</div>
<button (click)="c('Close')">Close</button>
</ng-template>
child.component.ts
@Input() menu;
...
handleFunc(menu) {
if(menu && typeof menu === 'function) {
menu.action ();
}
}
child.component.html
<a (click)="handleFunc(menu)">Pop up</a>
错误消息
错误TypeError :无法读取
open
的属性undefined
如何使它正常工作?