Soru Açısal 2 - Olayların listesi


Ben Angular 2 için acemi değilim. AngularJS Angular 2 gelen ilgili olaylar nelerdir? Örneğin: ng-click tıklamak)

Ne dersin ng-init ve diğer tüm olaylar? VS .NET'te intellisense sahip değilim, bu yüzden tahmin etmek zor.

Herhangi bir yardım lütfen!

Teşekkürler


31
2018-01-21 16:00


Menşei




Cevaplar:


Varsayılan işlenen etkinlikler, orijinal HTML DOM bileşeninin olaylarından eşlenmelidir:

http://www.w3schools.com/jsref/dom_obj_event.asp

sadece kaldırarak on önek.

onclick ---> (click)

onkeypress ---> (keypress)

vb...

Özel etkinliklerinizi de oluşturabilirsiniz.

ancak ngInit bir HTML olayı değildir, bu Angular'ın Bileşen yaşam döngüsünün bir parçasıdır ve Açısal 2'de, bileşeninizin belirli döngü içerisine girdiğinde çağrılacak olan temel olarak özel yöntem adları olan "kancalar" kullanılarak işlenir. Sevmek:

ngOnInit

ngOnDestroy

vb...


52
2018-01-21 16:51



"Varsayılan işlenen etkinlikler, orijinal HTML DOM bileşeninin olaylarından eşlenmelidir" <- Kaynağınızı alıntılayabilir veya mevcut etkinliklerin bir listesini verebilir misiniz? Resmi bir açısal 2 olay listesi bulamadım. - Sir4ur0n
İşte bir daha eksiksiz listesi DOM Etkinlikleri. - csguimaraes
İşte chekc için başka bir yer developer.mozilla.org/en-US/docs/Web/Events - Belter
@Langley Angular gibi belirli olayların tam listesine bağlantı var mı? ngOnInit ve ngOnDestroy? - Socrates
angular.io/guide/lifecycle-hooks - Langley


Bu Angular2'nin büyük avantajlarından biridir. Her etkinliğin özelleştirilmiş olması gerekmez ng-xxx Direktif artık
Özel öğeler ve her türlü özel etkinlik üreten diğer kütüphaneler ile bu yaklaşım uçmaz.

Angular2 içinde (eventName)="expression" bağlayıcı sözdizimi bilinen ve bilinmeyen herhangi bir etkinliğe abone olmayı sağlar.

$event değişken hala mevcut (eventName)="myEventHandler($event)"

Ayrıca bakınız https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding


5
2018-01-21 16:07





İşte Açısal olayların listesi Daha fazla bilgi için lütfen gerekli belgeleri kontrol edin

(focus)="myMethod()"
(blur)="myMethod()" 
(submit)="myMethod()"  
(scroll)="myMethod()"

(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"

(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"

(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"

(click)="myMethod()"
(dblclick)="myMethod()"

(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"

3
2018-05-22 19:29





Olayları işlemek için aşağıdaki sözdizimini kullanabilirsiniz (örneğin click sevmek ng-click Angular1 ile):

<button (click)="callSomeMethodOfTheComponent()">Click</button>

Buradaki fark, bunun daha jenerik olmasıdır. Yani DOM olaylarını doğrudan kullanabilirsiniz, ancak aynı zamanda EventEmitter sınıf.

İşte nasıl ele alınacağını açıklayan bir örnek click etkinlik ve özel bir etkinlik (my-event) bir alt bileşen tarafından tetiklendi:

@Component({
  selector: 'my-selector',
  template: `
    <div>
      <button (click)="callSomeMethodOfTheComponent()">Click</button>
      <sub-component (my-event)="callSomeMethodOfTheComponent()"></sub-component>
    </div>
  `,
  directives: [SubComponent]
})
export class MyComponent {
  callSomeMethodOfTheComponent() {
    console.log('callSomeMethodOfTheComponent called');
  }
}

@Component({
  selector: 'sub-component',
  template: `
    <div>
      <button (click)="myEvent.emit()">Click (from sub component)</button>
    </div>
  `
})
export class SubComponent {
  @Output()
  myEvent: EventEmitter;

  constructor() {
    this.myEvent = new EventEmitter();
  }
}

Umarım size yardımcı olur. Thierry


1
2018-01-21 16:01





Angular 2 anlamaya başlamak için harika bir yer resmi Web sayfasıdır.

İşte hepsini görebilirsin angular2 / ortak ng-XXX şimdi olduğu gibi ngXxxx

enter image description here

Benim durumumda Angular 1 ve Angular 2 arasındaki farkları anlamanın en iyi yolu dersleri yapıyordu:


1
2018-01-21 16:42