5 Soru: Açısal 2 - Olayların listesi

tarafından oluşturulan soru Thu, Jan 21, 2016 12:00 AM

Ben açısal 2'ye acemi yaşıyorum. AngularJS'den Angular 2'ye karşılık gelen olaylar nelerdir? örneğin: ng-click - (tıkla)

ng-init ve diğer tüm etkinlikler nasıl? VS .NET'te intellisense kullanmıyorum, bu nedenle tahmin edilmesi zor.

Herhangi bir yardım lütfen!

sayesinde

    
37
5 Yanıtlar                              5                         

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

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

yalnızca on önekini kaldırarak.

onclick --- > (click)

onkeypress --- > (keypress)

vb ...

Özel etkinliklerinizi de oluşturabilirsiniz.

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

ngOnInit

ngOnDestroy

vb ...

    
60
2016-01-21 16: 51: 14Z
  1. "Varsayılan işlenen etkinlikler, orijinal HTML DOM bileşeninin olaylarından eşlenmelidir" < - Kaynağınızı alıntılayabilir misiniz veya mevcut etkinliklerin bir listesini verebilir misiniz? Herhangi bir resmi Angular 2 etkinlik listesi bulamadım.
    2016-05-27 13: 32: 12Z
  2. İşte daha eksiksiz listesi href = "https://developer.mozilla.org/en-US/docs/Web/Events" rel = "nofollow noreferrer"> DOM Etkinlikleri .
    2016-08-15 00: 46: 08Z
  3. Burada chekc için başka bir yer var developer.mozilla.org/en-US/docs/Web/Events
    2017-08-22 01: 56: 16Z
  4. @ Langley ngOnInit ve ngOnDestroy gibi tüm Açısal olayların listesine linkiniz var mı?
    2018-03-04 11: 33: 13Z
  5. 2018-03-04 16: 51: 49Z

Bu, Angular2'nin en büyük avantajlarından biridir. Artık her etkinliğin özelleştirilmiş bir ng-xxx direktifine ihtiyacı yoktur.
Özel öğeler ve her türlü özel etkinliği üreten diğer tüm kütüphanelerde, bu yaklaşım uçmaz.

Angular2'de (eventName)="expression" bağlama sözdizimi, bilinen ve bilinmeyen herhangi bir olaya abone olmanıza izin verir.

$event değişkeni hala kullanılabilir durumda (eventName)="myEventHandler($event)"

Ayrıca bkz. https: //angular .io /docs /ts /son /rehber /şablon syntax.html #! # olay bağlayıcı

    
6
2017-01-13 16: 30: 00Z
  1. $olayı ne tür? Önceden tanımlanmış olay olan .ts dosyasına herhangi bir şey koymak yerine?
    2018-12-22 12: 02: 47Z
  2. Bu eventName'a bağlıdır. DOM etkinlikleri için mdn'den bilgi alırsınız ('klik' geliştirici) 'ı tıklayın. mozilla.org/en-US/docs/Web/Events/click ) ve eğer bir Açısal yönerge veya bileşenden geliyorsa, belgelerine bakınız.
    2018-12-22 12: 19: 18Z

Angular'daki olayların listesi Daha fazla bilgi için gerekirse lütfen belgeleri inceleyin

 
(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()"
    
5
2018-05-22 19: 29: 49Z
  1. Bu liste nerden? Hangi belgeleri kastediyorsunuz?
    2018-10-23 09: 00: 21Z

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

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

Buradaki fark, bunun daha genel olmasıdır. Yani, DOM olaylarını doğrudan kullanabilir, ancak EventEmitter sınıfı kullanılarak tanımlanan özel olayları da kullanabilirsiniz.

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

 
@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
2016-01-21 16: 15: 31Z

Açısal 2'yi anlamaya başlamak için harika bir yer resmi Web Sayfasıdır.

Burada tüm angular2 /common ng-XXX şu anda olduğu gibi olmasına rağmen ngXxxx

 buraya resim açıklamasını girin

Benim durumumda, Açısal 1 ve Açısal 2 arasındaki farkları anlamanın en iyi yolu öğreticileri yapıyordu:

1
2016-01-21 16: 42: 29Z
kaynak yerleştirildi İşte