Angular2がクリックハンドラにデータを渡しています

Question

私はこのすべてを正しく表現しているかどうかはわかりません。 Angular2でロットが変更されました。フォームデータをコンポーネントのサービスに渡そうとしています。私は "Generate"ボタンをクリックするたびにこのデータを渡したいと思います。私は、フォームデータをオブジェクトにカプセル化し、そのオブジェクトをコンポーネントに注入されたサービスに渡したいと考えています。サービスはすべての重い持ち上げを実行します。すべてのコンポーネントが実際に出力を表示します。

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を作成するを初期化します3210メンバー/プロパティ（その詳細については、セクションパラメータのプロパティを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>