Angular2将数据传递给点击处理程序

布赖恩

我不确定我是否正确地表述了所有这些内容;Angular2发生了很多变化。我正在尝试将表单数据传递给组件的服务。我想每当单击“生成”按钮时传递此数据。我将表单数据封装在一个对象中,并希望将该对象传递给注入到组件中的服务。该服务执行所有繁重的工作。组件真正要做的就是显示输出。

generator.component.ts

export class Generator {
    passwords: string[]; // output array
    passwordsObj: Object = { // form data passed to service
        letters: "",
        numbers: "",
        symbols: "",
        amount: ""
    };
    constructor(gs: GeneratorService) {
        this.passwords = gs.generatePasswords(passwordsObj); // originally hard-coded, I want to now trigger this method when the "Generate" button is clicked
    }

    clicked(obj) {
        // handle the click event?
    }
}

我希望该generatePasswords方法以passwordsObj参数为参数。我知道该怎么做。我只是不知道如何在generatePasswords单击组件的按钮时触发服务的方法。

generator.component.html代码段

<button type="submit" (click)="clicked(passwordsObj)">Generate</button>
马克·拉杰科克

使用privatepublic创建一个初始化gs成员/属性(有关此信息,请参阅《TypeScript手册》的“参数属性”部分):

constructor(private gs: GeneratorService) {}

然后在您的click事件处理程序中,只需调用service方法并将您的passwordsObj作为参数传递

clicked() {
   this.passwords = this.gs.generatePasswords(this.passwordsObj);
}

请注意,您不需要传递passwordsObj给事件处理程序,因为它是组件的属性,因此clicked()方法可以通过this对象访问它

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章