Question

我不确定我是否正确地说明了这一切; 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>

Answer 1

使用private或public创建初始化gs成员/属性（有关详细信息，请参阅TypeScript Handbook参数属性部分）：

constructor(private gs: GeneratorService) {}

然后在您的点击事件处理程序中，只需调用服务方法并将passwordsObj作为参数传递：

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

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

Answer 2

你可以试试这个：

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

与

<button type="submit" (click)="clicked()">Generate</button>

Angular2将数据传递给click处理程序

2 个答案: