调用模板变量的方法给出＆＃34; undefined＆＃34;例外

Question

我有一个包含两个子组件的父级。

AppComponent
     NotificationsComponent
     MoveCopyComponent

我想将MoveCopyComponent的值发送到NotificationComponent。每当我发出时，我都会在NotificationComponent中获取未定义的属性，如屏幕截图所示

<notifications #notificationsMenu role="menuitem" dropdown-item 
       [caller]="'menu'" 
       (acceptShareFromMenuEvent)="shareAcceptModal.PinItem($event)"                                                                         
       (contentShareAccepted)="shareAcceptModal.hide()">
</notifications>

在下面我们已经声明了一个弹出模态以放置内容的组件。

<movecopy-item #shareAcceptModal 
    (shareAcceptedandPlaced) = "notificationItem.contentAccepted($event)">

</movecopy-item>

触发模式（movecopy组件） shareAcceptedandPlaced 事件中的按钮，我需要在我的通知组件中执行 contentAccepted（..）方法，如下所示。

shareAcceptedandPlaced(){
       this.shareAcceptedandPlaced.emit(this.sharedItemPinnedInfo);     
}

这里发生的事情是，notifications组件包含传入组件的集合，而move-CopyItem只是放置传入组件的选择组件。

当#shareAcceptModal引发＆＃34;（shareAcceptandPlaced）＆＃34; ＆＃34; notificationItem＆＃34;＆＃34; contentAccepted（）方法，我得到以下异常： ＆＃34;无法在undefined上调用contentAccepted。如上面的截图＆＃34;

我在这里做错了什么？

Answer 1

<强>误

1. 您无法像

   那样调用子组件方法

   (shareAcceptedandPlaced) = "notificationItem.contentAccepted($event)"
   

2. 您正在发出一个Output（）变量，该变量不是您事件中通知的子项shareAcceptedandPlaced()

<强>解决方案

1. 由于您将AppComponent作为父级，因此您可以使用@ViewChild（） 对于子组件和访问属性和方法 您的两个子组件

   @ViewChild(movecopyComponent) mcopyComp: movecopyComponent;
   @ViewChild(NotificationsComponent) notificationMenu: NotificationsComponent;
   

2. 在<movecopy>中修改您的方法调用，如下所示

   <movecopy-item #shareAcceptModal (shareAcceptedandPlaced)="myContentChanged()">
   </movecopy-item>
   

3. 您可以使用myContentChanged（）方法将其处理为

   myContentChanged() {
          this.mcopyComp.properties....
          let temp: {...};        
          this.notificationMenu.contentAccepted(temp);
   }