从Aurelia w/TypeScript组件外部调用组件视图模型函数时，“Can not read property of undefined”

Question

我的理解是，通过view-model.ref，我可以从组件外部访问组件的视图模型，称之为功能。

下面的代码将导致无法读取属性 'LoadForAdditionalLocations' 未定义

成分的导入

export class UserLocationSelector { 
    public LoadForAdditionalLocations(reportLogin:string, addLocationsLogin:string){ 
     ///do stuff 
    } 
} 

页面组件上（TS文件）

export class AddLocation{ 
    attached(){ 
     this.UserLocationSelector.LoadForAdditionalLocations("user1","user2"); 
    } 
} 

该组件处于打开状态的页面（htmlf ILE）

<template> 
    <require from='user-location-selector'></require> 
    <div> 
     <user-location-selector view-model.ref="UserLocationSelector"></user-location-selector> 
    </div> 
</template> 

Answer 1

传递给裁判属性的名称将成为您的虚拟机的属性，所以它必须使用this.进行访问。出于这个原因，建议您遵循JavaScript命名约定。

元器件导入

export class UserLocationSelector { 
    public loadForAdditionalLocations(reportLogin:string, addLocationsLogin:string){ 
     ///do stuff 
    } 
} 

页该组件是在（TS文件）

export class AddLocation{ 
    userLocationSelector; 

    attached(){ 
     this.userLocationSelector.loadForAdditionalLocations("user1","user2"); 
    } 
} 

页该组件是在（HTMLFILE）

<template> 
    <require from='user-location-selector'></require> 
    <div> 
     <user-location-selector view-model.ref="userLocationSelector"></user-location-selector> 
    </div> 
</template> 

下面是一个例子的要点：https://gist.run/?id=96774bc2d99de0b421880b8977f081d4