如何解决如何从另一个组件 n ember.js 调用组件中的函数?
单击编辑按钮后,我在打印用户组件中,我正在重定向编辑用户组件。 我必须将数据从打印用户发送到编辑用户。 所以我从打印用户组件类调用编辑用户组件类函数。 但它显示错误
app/components/print-user.hbs
</input5>
<table class="styled-table">
<thead>
<tr><th>User Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Mailid</th>
<th>Delete</th>
</tr>
</thead>
{{#each this.dummyresponse.Users_data as |user|}}
<tbody>
<tr>
<td>{{user.id}}</td>
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.mailid}}</td>
<LinkTo @route="edit-user" ><button {{on "click" (fn edituser user.id user.firstname user.lastname user.mailid )}} >Edit</button>r</LinkTo></td>
</tr>
</tbody>
{{/each}}
</table>
{{yield}}
app/components/print-user.js
import Component from '@glimmer/component';
import {action} from "@ember/object";
import {tracked} from "@glimmer/tracking";
import EditUserComponent from './edit-user';
export default class PrintUserComponent extends Component {
@tracked dummyresponse="";
@action
async printuser (){
let response=await fetch("/UserManagement/SearchServlet",{ method: "POST",body: JSON.stringify({
"type": "","searchtext": ""
})
});
this.dummyresponse=await response.json();
}
edituser (id,firstname,lastname,mailid){
alert("print-user.js entered");
console.log(EditUserComponent.edituser(id,mailid));
alert("print-user.js after method call entered");
}
}
app/components/edit-user.hbs
import Component from '@glimmer/component';
export default class EditUserComponent extends Component {
async edituser (id,mailid){
alert("edit-user.js entered");
let response=await fetch("/UserManagement/UserManagementServlet",body: JSON.stringify({
"type": "edit","id": id,"firstname":firstname,"lastname":lastname,"mailid":mailid
})
});
}
}
app/components/edit-user.js
import Component from '@glimmer/component';
export default class EditUserComponent extends Component {
async edituser (id,"mailid":mailid
})
});
}
}
Uncaught TypeError: _editUser.default.edituser is not a function
at Proxy.edituser (print-user.js:88)
at Proxy.<anonymous> (runtime.js:7105)
解决方法
您正在尝试将 edituser
的 EditUserComponent
方法用作 edituser
的 PrintUserComponent
方法中的静态方法。简化后的代码如下所示:
import EditUserComponent from './edit-user';
console.log(EditUserComponent.edituser(id,firstname,lastname,mailid));
您不是在类的实例上调用 edituser
方法,而是在类本身上调用。也许您正在寻找一个很好的旧效用函数?
// app/utils/edituser.js
async function edituser (id,mailid){
alert("edit-user.js entered");
let response=await fetch("/UserManagement/UserManagementServlet",{ method: "POST",body: JSON.stringify({
"type": "edit","id": id,"firstname":firstname,"lastname":lastname,"mailid":mailid
})
});
}
export default edituser;
可以像这样使用该实用程序函数:
import edituser from '../utils/edituser';
console.log(edituser(id,mailid));
组件只能在模板中调用。所以他们肯定不是你想要的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。