0
161
VistasLos métodos vinculados a la instancia de Angular2 no funcionan como ganchos
Se implementó el gancho ngOnInit() usando el método de enlace de instancia y dejó de funcionar....
Ejemplo simplificado:
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>Hello {{name}}</h1>' }) export class AppComponent { name = 'Angular'; ngOnInit = () => { this.name = 'World'; } }resultado esperado => "Hola Mundo" resultado real => "Hola Angular"
¿Se describe en alguna parte que exactamente esos métodos no se pueden usar exactamente para ganchos? ¿O cuál es el problema con usarlos como tales?
Ejemplo en vivo: https://plnkr.co/edit/aZ1CYkDn06KUENmDW3a3?p=preview
IMPORTANTE: La pregunta no es cómo solucionarlo. Sé que podría cambiar a ngOnInit() {} . La pregunta es: ¿por qué el método vinculado a la instancia no funciona como un gancho ?
SEGUIMIENTO Creó un problema en el repositorio Angular: para mejorar el comportamiento/docs/notificaciones de error: https://github.com/angular/angular/issues/16478 supongo que habrá una respuesta más clara. Lo publicaré aquí después de que quede claro / confirmado que el comportamiento es por diseño verificando solo los prototipos de clase.
3 Respuestas
Responde la pregunta0
Debería ser
ngOnInit() { this.name = 'World'; }Piense en ello como si estuviera anulando el ciclo predeterminado
Plunker fijo: https://plnkr.co/edit/DGkNulwYs4WpYULhl9gD?p=preview
Nota:
La implementación de los ganchos del ciclo de vida es opcional, como se indica en la documentación. Porque javascript no tiene interfaces.
Fuente: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#interface-opcional
Editar :
Lo que está haciendo es simplemente crear una función dentro de su componente que se llama ngOnInit si desea ejecutarla, debe hacerlo en algún lugar dentro de su componente. El mejor lugar para hacerlo parece el constructor:
constructor(){ this.ngOnInit(); }Plunker fijo: https://plnkr.co/edit/NAHX5vfoMXtN95Y0oyOR?p=preview
Edit2:
Aquí está la prueba del prototipo:
De la forma en que lo hace, la función no formará parte de la cadena de prototipos de la clase base del componente (línea 17): 
Pero de esta manera, Angular lo verá como parte de la cadena de prototipos (línea 15): 
0
Agregue los implementos y cambie el ngOnInit como dice echonax:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>Hello {{name}}</h1>' }) export class AppComponent implements OnInit { name = 'Angular'; ngOnInit() { this.name = 'World'; } }0
Declare explícitamente que el componente implementa OnInit y corrija la sintaxis de implementación de la función:
export class AppComponent implements OnInit { public ngOnInit(): void { this.name = 'World'; } }