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

【问题标题】：Angular2 passing data to click handlerAngular2将数据传递给点击处理程序
【发布时间】：2019-07-22 23:30:58
【问题描述】：

我不确定我的措辞是否正确； 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 sn-p

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

【问题讨论】：

标签： angular typescript click dom-events

【解决方案1】：

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

constructor(private gs: GeneratorService) {}

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

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

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

【讨论】：

我还有一个与stackoverflow.com/questions/36109641/… 相关的问题，但不想重复（我还不能评论其他问题）。我正在尝试绑定<input (ngModel)="passwordsObj.letters"> 之类的用户输入，但它不起作用。我认为这会将用户输入绑定到数据源。我不想使用两种方式绑定（避免使用[(ngModel)]）。我必须为此使用@Input 吗？
@daChi，你应该创建另一个问题，但如果你不想要双向绑定，你可能想要<input (input)="passwordsObj.letters = $event.target.value">。

【解决方案2】：

你可以试试这个：

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

与

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

【讨论】：