[英]How to call a function in a component from another component n ember.js?
單擊編輯按鈕后,我在打印用戶組件中,我正在重定向編輯用戶組件。 我必須將數據從打印用戶發送到編輯用戶。 所以我從打印用戶組件類中調用編輯用戶組件類 function。 但它顯示錯誤
應用程序/組件/打印用戶.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}}
應用程序/組件/打印用戶.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,firstname,lastname,mailid));
alert("print-user.js after method call entered");
}
}
應用程序/組件/edit-user.hbs
import Component from '@glimmer/component';
export default class EditUserComponent extends Component {
async edituser (id,firstname,lastname,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
})
});
}
}
應用程序/組件/編輯-user.js
import Component from '@glimmer/component';
export default class EditUserComponent extends Component {
async edituser (id,firstname,lastname,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
})
});
}
}
Uncaught TypeError: _editUser.default.edituser is not a function
at Proxy.edituser (print-user.js:88)
at Proxy.<anonymous> (runtime.js:7105)
您正在嘗試將EditUserComponent
的edituser
方法用作 PrintUserComponent 的edituser
方法中的PrintUserComponent
方法。 簡化后的代碼如下所示:
import EditUserComponent from './edit-user';
console.log(EditUserComponent.edituser(id,firstname,lastname,mailid));
您不是在 class 的實例上而是在 class 本身上調用edituser
方法。 也許您正在尋找一個好的舊實用程序 function 代替?
// app/utils/edituser.js
async function edituser (id,firstname,lastname,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;
該實用程序 function 可以這樣使用:
import edituser from '../utils/edituser';
console.log(edituser(id,firstname,lastname,mailid));
組件只能在模板中調用。 所以他們肯定不是你想要的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.