模板变量的调用方法会给出"undefined".例外 [英] Calling method on Template variables giving "undefined" exception

问题描述

我有一个父级，其中包含两个子级分量.

I have one parent containing two child components.

AppComponent
     NotificationsComponent
     MoveCopyComponent

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

I want to emit values of MoveCopyComponent to NotificationComponent. Whenever I emit i get a property undefined in the NotificationComponent as shown in the screenshot

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

在下面，我们声明了一个组件，该组件会弹出一个模式以放置内容.

And down below we have declared a component which pops a modal to place the content.

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

</movecopy-item>

在模式(移动复制组件) shareAcceptedandPlaced 事件中单击按钮被触发，因此我需要在通知组件中执行 contentAccepted(..)方法，如下所示.

A button click in the modal(movecopy component) shareAcceptedandPlaced event is triggered by which I need to execute contentAccepted(..) method in my notifications component as below.

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

这里发生的是，通知组件包含传入组件的集合，而move-CopyItem仅仅是放置传入组件的选择组件.

What is happening here is that the notifications component contains the collection of the incoming components while the move-CopyItem is merely a selection component to place the incoming component.

当#shareAcceptModal为"notificationItem's"的contentAccepted()方法引发(shareAcceptandPlaced)"事件时，出现以下异常: 无法调用未定义的contentAccepted.如上图所示"

When the #shareAcceptModal raises the "(shareAcceptandPlaced)" event for the "notificationItem's" contentAccepted() method, I get the following exception: "Cannot call contentAccepted on undefined. as in the above screenshot"

我在这里做错了什么?

What am I doing wrong here?

推荐答案

错误

1. 您不能像这样调用子组件方法

1. You cannot call the child component method like

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

您正在发出一个Output()变量，该变量不是事件shareAcceptedandPlaced()

解决方案

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

1. Since you have AppComponent as a parent, you can use @ViewChild() for both the child components and access the properties and methods of your both child components as

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

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

Modify your method call in the <movecopy> as below

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

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

You can have your myContentChanged() method to handle it as

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

这篇关于模板变量的调用方法会给出"undefined".例外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！