@Output olay adları için öneriler (yerel olay adı çarpışmasını önlemek için) nedir?

Question

Angular 2 bileşenleri ve onların kompozisyonları ile oynadım ve yerel olay bubbling ve @Output ad çarpışma neden olduğu çirkin davranış, koştu.

ben teslim adıyla kendi olay yayıcısı sahiptir app-orta bileşeninde bu formu bileşenini kullanabilirsiniz

<form (ngSubmit)="submitButtonClicked($event)"> 
    <input type="text"/> 
    <button type="submit">Send</button> 
</form> 

şablona

yılında formu ile bileşen app-form var.

@Component({ 
    selector: 'app-middle', 
    templateUrl: './middle.component.html', 
    styleUrls: ['./middle.component.css'] 
}) 
export class MiddleComponent implements OnInit { 

    @Output() submit = new EventEmitter<string>(); 

    constructor() { } 

    emitSubmitEvent() { 
    this.submit.emit("some data"); 
    } 

} 

şablonu: şablonla

<div> 

    <app-form></app-form> 

</div> 

Ve uygulama bileşeni: Artık

<app-middle (submit)="submitListener($event)"></app-middle> 

, submitListener zaman (denir app-ortasında teslim

• adı verilecek aranan davranış)
form gönderildiğinde üstüne doğal olay kabarcık ("parazitik" davranışı) herhalde

, "parazitik" davranış DOM olaya dayanır, çünkü

, köpürme. Bu durumu, submitButtonClicked işleyicisinde event.stopPropagation() tarafından durdurabilirim ancak durdurmayı unutursam oldukça çirkin hatalar alıyorum. Genel olarak, bu davranışı oldukça tehlikeli buluyorum. Yanlış olmazsam, her olayın bağlanma ifade işleyicisi, iç bileşenlerden yerel olay tarafından potansiyel olarak "parazit" olarak adlandırılabilir. DOM olaylar (https://developer.mozilla.org/en-US/docs/Web/Events) Ve ileriye uyumluluk hakkında konuşmak yok herhangi aynı ada .... sen burada görebilirsiniz

aynı sorunu varsa: Bu sorunun içine https://bitbucket.org/winsik/submit-event-issue/src

Çalıştırmak mü? @Outputs adınızı nasıl adlandırıyorsunuz?

Answer 1

Bileşenlerin adıyla çok iyi çalıştığını ve tanımladığınız sorunları önleyen tutarlı ve anlaşılır bir kongre sağladığım için @Output olayları önbelleğe alıyorum. Örneğin, benim adında bir bileşenim olduğunu varsayalım. TurnEditorComponent - @Output olayları, turnEditorChange, turnEditorFocus, turnEditorBlur vb.