如何从一个组件调用另一个组件中的函数nember.js?

k75qkfdt  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(142)

我在一个打印用户组件中,在我点击编辑按钮后,我正在重定向编辑用户组件。我必须将数据从打印用户发送到编辑用户。因此我正在从打印用户组件类调用编辑用户组件类函数。但它显示了错误
应用程序/组件/打印-用户.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,firstname,lastname,mailid));
        alert("print-user.js after method call entered");
    }
}

应用程序/组件/编辑-用户.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
            })
        });
    }
}

app/components/edit-user.js
第一个

xytpbqjk

xytpbqjk1#

您正尝试将EditUserComponentedituser方法用作PrintUserComponentedituser方法中的静态方法。简化后的代码如下所示:

import EditUserComponent from './edit-user';
console.log(EditUserComponent.edituser(id,firstname,lastname,mailid));

你不是在类的一个示例上调用edituser方法,而是在类本身上调用。也许你正在寻找一个好的旧实用函数?

// 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;

该效用函数可以像这样使用:

import edituser from '../utils/edituser';
console.log(edituser(id,firstname,lastname,mailid));

组件应该只在模板中被调用。所以它们肯定不是你想要的。

相关问题