कोणीय 2 में कुंजी ट्रिगर पृष्ठ पर किसी भी क्लिक घटना दर्ज करें?

Question

नीचे दिए गए कोड में removeSelectedCountry() को कॉल किया जाना चाहिए जब स्पैन तत्व क्लिक किया जाता है और handleKeyDown($event) को div पर एक कीडाउन ईवेंट होने पर कॉल किया जाना चाहिए।

@Component({ 
    selector: "wng-country-picker", 
    template: ` 
    <ul class="CountryPicker-selected" *ngIf="selectedCountries.length > 0"> 
    <li *ngFor="let country of selectedCountries"> 
     <span class="Pill Pill--primary" (click)="removeSelectedCountry(country)"> 
     {{ country.name }} 
     </span> 
    </li> 
    </ul> 
    <div (keydown)="handleKeyDown($event)" class="CountryPicker-input"></div> 
`, 
providers: [CUSTOM_VALUE_ACCESSOR] 
}) 

लेकिन removeSelectedCountry() हर बार एंटर कुंजी दबाया जाता है।

कोड काम करने के लिए मुझे क्लिक ईवेंट को mousedown ईवेंट में बदलना पड़ा। यह ठीक काम करता है।

क्या कोई यह समझा सकता है कि क्यों कुंजी कुंजी क्लिक ईवेंट ट्रिगर करेगा?

@Component({ 
    selector: "wng-country-picker", 
    template: ` 
    <ul class="CountryPicker-selected" *ngIf="selectedCountries.length > 0"> 
    <li *ngFor="let country of selectedCountries"> 
     <span class="Pill Pill--primary" (mousedown)="removeSelectedCountry(country)"> 
     {{ country.name }} 
     </span> 
    </li> 
    </ul> 
    <div (keydown)="handleKeyDown($event)" class="CountryPicker-input"></div> 
`, 
providers: [CUSTOM_VALUE_ACCESSOR] 
}) 

ENTER कुंजी के लिए वर्ग snipppet

export class CountryPickerComponent { 

private selectedCountries: CountrySummary[] = new Array(); 

private removeSelectedCountry(country: CountrySummary){ 
    // check if the country exists and remove from selectedCountries 
    if (this.selectedCountries.filter(ctry => ctry.code === country.code).length > 0) 
    { 
     var index = this.selectedCountries.indexOf(country); 
     this.selectedCountries.splice(index, 1); 
     this.selectedCountryCodes.splice(index, 1); 
    } 
} 

private handleKeyDown(event: any) 
{ 
    if (event.keyCode == 13) 
    { 
     // action 
    } 
    else if (event.keyCode == 40) 
    { 
     // action 
    } 
    else if (event.keyCode == 38) 
    { 
     // action 
    }  
} 

Answer 1

जोड़ा जा रहा है, क्यों (keyup.enter) का उपयोग नहीं:

@Component({ 
    selector: 'key-up3', 
    template: ` 
    <input #box (keyup.enter)="values=box.value"> 
    <p>{{values}}</p> 
    ` 
}) 
export class KeyUpComponent_v3 { 
    values = ''; 
} 

Answer 2

उपयोग (keyup.enter)।

कोणीय हमारे लिए महत्वपूर्ण घटनाओं को फ़िल्टर कर सकता है। कोणीय घटनाओं के लिए कोणीय का एक विशेष वाक्यविन्यास है। हम कोणीय के keyup.enter छद्म-घटना के लिए बाध्यकारी द्वारा केवल एंटर कुंजी के लिए सुन सकते हैं।

Answer 3

<form (keydown)="someMethod($event)"> 
    <input type="text"> 
</form> 

someMethod(event:any){ 
    if(event.keyCode == 13){ 
     alert('Entered Click Event!'); 
    }else{ 
    } 
} 

Answer 4

यहाँ सही समाधान है! चूंकि बटन में परिभाषित विशेषता प्रकार नहीं है, इसलिए कोणीय शायद सबमिट अनुरोध के रूप में कीप ईवेंट जारी करने का प्रयास कर रहा है और बटन पर क्लिक ईवेंट ट्रिगर करता है।

<button type="button" ...></button> 

डेबराक के लिए बड़ा धन्यवाद!

Angular2 - Enter Key executes first (click) function present on the form

Answer 5

@Component({ 
    selector: 'key-up3', 
    template: ` 
    <input #box (keyup.enter)="doSomething($event)"> 
    <p>{{values}}</p> 
    ` 
}) 
export class KeyUpComponent_v3 { 
    doSomething(e) { 
    alert(e); 
    } 
} 

यह मेरे लिए काम करता है!