2017-10-16 92 views
1

我有一个带有子组件的父组件。我有父母之间的约束确定,但似乎缺少一个细节从孩子到父母的其他方向,我认为是我的无知,因为angular4/typescript对我来说都是新手。未定义的emit()属性 - EventEmitter/@Output问题

因此,父组件托管一个子组件并将数据传递给子罚款;

<app-component-name (onSomethingAdded)="doSomethingWithIt($event)"></app-component-name> 

<app-component-name>恰好是与用户输入的,我通过谷歌地图API地理编码到纬度/经度字符串地址的意图对话框子组件。对话框显示正常,输入输入并返回正常,地理编码通过,我的经纬度返回没有问题....我的问题是获取该对象与坐标等回到父组件地图是所以我可以为它添加一个标记等...

在子组件中,我像这样声明了@Output;

@Output() 
onSomethingAdded = new EventEmitter<{animation:any, title: string, position: {lat:number, lng:number}}>(); 

那么这是应该发出这样开溜回父组件(火灾很好,因为它也是在那里我做从对话框子组件的输入地址解析)方法看起来像这样...

addNewSomething(newLoc) { 

    // A bunch of other stuff omitted for the sake of a small example 
    // THIS BUGGER below pukes at me 
    // Uncaught TypeError: Cannot read property 'emit' of undefined 

     this.onSomethingAdded.emit({ 
      animation: google.maps.Animation.DROP, 
      title: newLoc.form.controls.title.value, 
      position: { 
      lat: res[0].geometry.location.lat(), 
      lng: res[0].geometry.location.lng() 
      } 
     }); 
} 

哪里newLoc是我从ngForm回来从对话框中输入的对象,看起来不错,和谷歌地图返回我我COORDS和数据就好如图所示为纬度/经度。所以我希望你们中的一个人在这个时间内能够真正快速地发现我的愚蠢,为什么我得到那个未定义的emit属性?我只是做一些喜欢忘记定义某些东西的东西吗?

我知道我试图发出的所有值都在那里,所以我明显缺少一些基本定义或其他东西?感谢您的学习。

+1

你在哪里调用这个'addNewSomething'在你的子组件中。你可以看看[this](https://rahulrsingh09.github.io/AngularConcepts/event),以获得一个简单的事件发射器。 –

+0

@RahulSingh该方法从子component.html中的表单调用,如: '

+0

是所有的属性未定义或只有一个? –

回答

0

所以问题原来是由嵌套方法提供的变量范围。对于其他读者来说,这是伪造的修复。

addNewSomething(newLoc) { 

    const that = this; 

    aChildMethod() { 


     yetAnotherNestedMethod() { 

     that.onSomethingAdded.emit({ 
      animation: google.maps.Animation.DROP, 
      title: newLoc.form.controls.title.value, 
      position: { 
      lat: res[0].geometry.location.lat(), 
      lng: res[0].geometry.location.lng() 
      } 
     }); 
     } 
    } 
}; 

其中that=this;是修复。感谢所有想要帮助的人。 :)