Angular2將數據傳遞給點擊處理程序

我不確定我是否正確表述了所有這些; 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>

來源

2016-04-22 BrianRT

使用private或public創建初始化gs成員/屬性（見TypeScript Handbook，部分參數屬性有關更多的信息）：

constructor(private gs: GeneratorService) {}

然後在點擊事件處理程序，只需調用服務方法，並通過您的passwordsObj作爲參數：

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

請注意，您不需要將passwordsObj傳遞給事件處理函數，因爲它是組件的屬性，因此clicked()方法可以通過this對象訪問它。

來源

2016-04-22 16:22:45

是的，感謝@ Jean-Philippe的編輯。 –

謝謝你的回答。 – BrianRT

我有另一個相關的問題http://stackoverflow.com/questions/36109641/angular2-component-one-way-binding-or-input，但不想重複它（我不能評論其他問題然而）。我試圖綁定用戶輸入，如''，但它不起作用。我認爲這會將用戶輸入綁定到數據源。我不想使用雙向綁定（避免'[（ngModel）]'）。我必須爲此使用'@ Input'嗎？ – BrianRT

你可以試試這個：

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

與

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

來源

2016-04-22 16:09:52

Angular2將數據傳遞給點擊處理程序

回答

相關問題