Angular 2 - Lista wydarzeń

Question

Jestem początkującym w Angular 2. Jakie są odpowiednie wydarzenia od AngularJS do Angular 2? np .: ng-click na (kliknij)

Co powiecie na ng-init i na wszystkie inne wydarzenia? Nie mam intellisense w VS .NET, więc trudno zgadnąć.

Każda pomoc proszę!

Dzięki

Answer 1

Domyślne obsługiwane zdarzenia powinny być odwzorowane z wydarzeniami oryginalnego DOM HTML komponentu:

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

tylko przez usunięcie prefiksu on.

onclick --->(click)

onkeypress --->(keypress)

etc ...

Można również tworzyć niestandardowe zdarzenia.

Jednak nie jest zdarzeniem HTML, jest częścią cyklu życia składnika Angular, aw Angular 2 są obsługiwane za pomocą "hooków", które są w zasadzie określonymi nazwami metod wewnątrz komponentu, które będą wywoływane za każdym razem, gdy komponent wejdzie określony cykl. Jak:

ngOnInit

ngOnDestroy

etc ...

Answer 2

Można użyć następującej składni do obsługi zdarzeń (np click jak ng-click z Angular1):

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

Różnica polega na tym, że jest to bardziej ogólne. Chodzi o to, że możesz używać zdarzeń DOM bezpośrednio, ale także niestandardowych zdefiniowanych przy użyciu klasy EventEmitter.

Oto przykład, który opisuje jak radzić sobie click zdarzenia i zdarzenia niestandardowego (my-event) sygnalizował składnik dodatkowy:

@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(); 
    } 
} 

nadzieję, że to pomaga, Thierry

Answer 3

ten jest jedną z największych zalet Angular2. Nie każda impreza wymaga już dostosowanej dyrektywy ng-xxx.
Z niestandardowymi elementami i wszystkimi innymi bibliotekami produkującymi wszelkiego rodzaju niestandardowe zdarzenia, takie podejście nie działa.

W Angular2 składnia wiążąca (eventName)="expression" pozwala subskrybować dowolne znane i nieznane zdarzenie.

Zmienna $event jest nadal dostępna (eventName)="myEventHandler($event)"

Zobacz także https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Answer 4

To idealne miejsce, aby zacząć rozumieć kątowy 2 jest oficjalną stronę internetową.

Here widać cały angular2/wspólnego ng-XXX chociaż teraz jest następująco ngXxxx

w moim przypadku najlepszym sposobem, aby zrozumieć różnice między Kątowymi 1 a kątowe 2 robił tutoriale:

• Tour of Heroes
• : jest to praktyczny przewodnik dla Angular dla doświadczonych programistów, którzy budują aplikacje klienckie w HTML i JavaScript.