Búsqueda de sitios web

typescript - Error en el constructor de la clase Angular2: no hay proveedor para Number

He comenzado un proyecto utilizando el kit de desarrollo que se encuentra aquí: https://github.com/datatypevoid/ng2-mean-webpack. Todo parece funcionar perfectamente, excepto cuando creo una nueva clase con propiedades de parámetros (como se ve en la documentación oficial de Typescript aquí: https://www.typescriptlang.org/docs/handbook/classes.html), recibo un mensaje de error en la consola que dice:

ORIGINAL EXCEPTION: No provider for Number!

Aquí está mi clase:

@Component({
  selector: 'grid-tile',
  template: require('./grid-tile.component.html'),
  styleUrls: [require('!style!css!sass!./grid-tile.component.scss')],
  providers: [],
  directives: [],
  pipes: []
})
export class GridTile extends Tile {
  constructor(private x:number, private y: number) {
    super();
  }
}

Y aquí está cómo creo las instancias:

var tile = new GridTile(3,4);
tiles.push(tile);

Realmente apreciaría encontrar una solución para este problema a medida que avanzo en el desarrollo. He seguido el tutorial Angular2 Tour of Heroes y las propiedades de los parámetros parecían funcionar bien, así que me pregunto si tiene algo que ver con el kit de desarrollo o simplemente con algo que estoy pasando. Soy totalmente nuevo en Angular2, así que esto podría ser un error por mi culpa. Gracias por la ayuda.

Respuesta #1

Angular 2 utiliza el patrón MVC: una clase decorada con @Component es equivalente a un Controlador. Esto significa que:

  • no puedes proporcionar parámetros al constructor si no utilizas Inyección de Dependencias (esto genera el error);

  • la clase no debe ser instanciada, pero debe ser invocada en el momento del arranque, o a través de un enrutador, o en Angular pasándola como hijo a través de una directiva.

Si analizas cuidadosamente el Tour of Heroes, notarás que creas un servicio, que es una clase inyectable:

@Injectable()
export class HeroService {
  ...
  }
}

Luego lo inyectas como un provider (en el mismo componente o en uno padre), y lo instancias pasándolo al constructor del componente:

@Component({
  selector: 'my-app',
  ...
  providers: [HeroService]
})
export class AppComponent implements OnInit {
  ...
  constructor(private heroService: HeroService) { }
  ...
}

De esta manera, la referencia a la clase inyectada es heredada por el componente y por todos los componentes hijos.

En tu ejemplo, tienes dos variables como parámetros, y el error se genera porque no corresponden a ningún proveedor en el componente.

Puedes leer más aquí.

O, para comenzar: http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2

Artículos relacionados