Angular 2-Lista de eventos
ng-click to (click)
E que tal ng-init e todos os outros eventos? Não vou ter intellisense em VS. net, por isso é difícil de adivinhar.
Qualquer ajuda, por favor!
Obrigado.
5 answers
Os eventos tratados por omissão devem ser mapeados a partir dos eventos originais do componente HTML DOM:
Http://www.w3schools.com/jsref/dom_obj_event.asp
Apenas removendo o prefixo on.
onclick ---> (click)
onkeypress ---> (keypress)
Etc...
Você também pode criar os seus eventos personalizados.
No entanto ngInit não é um evento HTML, isto faz parte do ciclo de vida do componente Angular, e no Angular 2 eles são tratados usando "ganchos", que são basicamente nomes de métodos específicos dentro do seu componente que serão chamados sempre que o componente entra no ciclo específico. Tipo:
Etc...
Com elementos personalizados e todas as outras bibliotecas produzindo todos os tipos de eventos personalizados, esta abordagem não voa.
Em Angular2 a sintaxe de ligação (eventName)="expression" permite subscrever qualquer evento conhecido e desconhecido.
A variável $event ainda está disponível (eventName)="myEventHandler($event)"
Ver também https://angular.io/docs/ts/latest/guide/template-syntax.html # # # encadernação de eventos
(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()"
Pode usar a seguinte sintaxe para lidar com eventos (por exemplo click como ng-click com o Angular1):
<button (click)="callSomeMethodOfTheComponent()">Click</button>
EventEmitter.
Aqui está uma amostra que descreve como lidar com um evento click e um evento personalizado (my-event) desencadeado por um sub-componente:
@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();
}
}
Aqui você pode ver todo o angular2 / common ng-XXX embora agora seja como se segue ngxxx
No meu caso, a melhor maneira de compreender as diferenças entre o Angular 1 e o Angular 2 era fazer os tutoriais:
- Tour of Heroes
- O Guia de Desenvolvimento : Este é um guia prático para programadores experientes que estão construindo aplicações cliente em HTML e JavaScript.