通过函数将模态传递给子组件

时间:2018-06-20 09:41:26

标签: javascript angular

我试图使用有关封装和单一职责原则的想法,所以我想到了这个想法,其中我通过函数将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

如何使它正常工作?

0 个答案:

没有答案