调用模板变量的方法给出 "undefined" 异常

Question

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

AppComponent
     NotificationsComponent
     MoveCopyComponent

我想将 MoveCopyComponent 的值发送到 NotificationComponent。每当我发出时，我都会在 NotificationComponent 中得到一个属性 undefined，如屏幕截图所示

<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);     
}

这里发生的是通知组件包含传入组件的集合，而 move-CopyItem 只是一个用于放置传入组件的选择组件。

当#shareAcceptModal 引发 "notificationItem's" contentAccepted() 方法的“(shareAcceptandPlaced)”事件时，我得到以下异常： "Cannot call contentAccepted on undefined. as in the above screenshot"

我在这里做错了什么？

Answer 1

错误

不能像

那样调用child组件方法

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

您发出的 Output() 变量不是您事件中的 child 通知 shareAcceptedandPlaced()

解决方案

因为你有 AppComponent 作为 parent，你可以使用 @ViewChild() 对于 child 组件并访问属性和方法你的两个 child 组件为
```
@ViewChild(movecopyComponent) mcopyComp: movecopyComponent;
@ViewChild(NotificationsComponent) notificationMenu: NotificationsComponent;
```

修改 <movecopy> 中的方法调用如下

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

您可以使用 myContentChanged() 方法将其处理为

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

调用模板变量的方法给出 "undefined" 异常

Calling method on Template variables giving "undefined" exception

angular2-components

angular2-output

angular