Angular2 передача данных в обработчик кликов


Я не уверен, правильно ли я все это формулирую; многое изменилось в Angular2. Я пытаюсь передать данные формы в службу компонента. Я хочу передавать эти данные всякий раз, когда нажимается кнопка" Создать". Я инкапсулирую данные формы в объект и хочу передать этот объект службе, которая вводится в компонент. Служба выполняет всю тяжелую работу. Все, что компонент действительно делает, это отображает выход.

Генератор.деталь.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 сервиса, когда кнопка компонента нажата.

Генератор.деталь.html сниппет

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

2 ответа:

Используйте private или public для создания инициализации члена/свойства gs (дополнительную информацию об этом смотрите в руководстве по машинописи , раздел Свойства параметров):

constructor(private gs: GeneratorService) {}

Затем в обработчике событий click просто вызовите метод service и передайте ваш passwordsObj в качестве параметра:

clicked() {
   this.passwords = this.gs.generatePasswords(this.passwordsObj);
}
Обратите внимание, что вам не нужно передавать passwordsObj обработчику событий, так как это свойство компонента, следовательно, метод clicked() имеет доступ к нему через объект this.

Вы можете попробовать это:

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

С

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